2

这就是我所拥有的，我知道这是不对的。基本上，我想说的是，“如果名为 3 的 div 的高度是 445，则将背景图像更改为此 jpg。”

if ( ".three" == height:"445" ) {".three.style.background-image"= 'url(images/2.jpg)'};

提前致谢！

4

1 回答 1

7

假设你的 HTML 是这样的：

<div class="three" style="height: 445px;">
    <p>Some arbitrary content.</p>
</div>

然后以下将起作用：

var elems = document.getElementsByClassName('three');
for (var i = 0, len = elems.length; i < len; i++){
    if (parseInt(elems[i].style.height, 10) == 445) {
        elems[i].style.backgroundImage = 'url(images/2.png)';
    }
}

JS Fiddle 演示，为了简单起见，使用background-color而不是background-image）。

但是，如果您使用 CSS 来设置元素样式：

.three {
    height: 445px;
}

然后你需要使用window.getComputedStyle()：

var elems = document.getElementsByClassName('three');
for (var i = 0, len = elems.length; i < len; i++){
    console.log(parseInt(window.getComputedStyle(elems[i], null).height, 10));
    if (parseInt(window.getComputedStyle(elems[i], null).height, 10) == 445) {
        elems[i].style.backgroundColor = 'red';
    }
}

JS Fiddle 演示，（使用，如上所述，background-color而不是background=image）。

如果您要使用 JavaScript 库，则可以稍微简化一下；使用jQuery（例如，虽然我不是特别提倡jQuery，它只是我最熟悉的库），上面可以重写为：

$('.three').css('background-image', function(){
    return $(this).height() == 445 ? 'images/2.png' : '';
});

JS Fiddle 演示，（再次使用background-color代替background=image）。

请注意，Internet Explorer 与大多数浏览器的工作方式不同，因为window.getComputedStyle()它不可用，currentStyle()但是有（但没有 Windows，我无法提供有关如何使用它的建议）。

有关 JavaScript 的指导和参考，我建议（最重要的是）阅读 Mozilla Developer Network 的JavaScript 文档。

参考：

于 2013-04-04T22:24:03.443 回答