gpt4 book ai didi

javascript - 为什么 elem.style.backgroundImage 返回空而不是 CSS 属性?

转载 作者:塔克拉玛干 更新时间:2023-11-02 23:06:26 25 4
gpt4 key购买 nike

为什么下面的 style.backgroundImage 输出一个空字符串?如何检索图像的高度和宽度,以便适本地设置 div 的尺寸?

<!DOCTYPE html>
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="myDiv" onclick="outputBGImageUrl(this)">
Click To Get BG Image Property
</div>
<script type="text/javascript">
function outputBGImageUrl(elem){
var bgImage = elem.style.backgroundImage;
console.log(bgImage);
}
</script>
</body>
</html>

CSS:

.myDiv{
background-image:url(box.jpg);
}

最佳答案

elem.style 指的是在元素上设置的内联样式。

获取背景图片的正确方法可以在这里找到:Javascript: Get background-image URL of <div>

无论如何,它就在这里(改进了 url-getting ;-))。

var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bg_image_url = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

这是获取尺寸的方法:

var image = new Image();

image.onload = function(){
var width = image.width,
height = image.height;
}

image.src = bg_image_url; //set the src after you have defined the onload callback

关于javascript - 为什么 elem.style.backgroundImage 返回空而不是 CSS 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21655367/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com