为什么以下输出为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:获取<div>的背景图像URL
无论如何它在这里(改进了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
| 归档时间： |
|
| 查看次数： |
1527 次 |
| 最近记录： |