Question

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

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

提前致谢！

Answer 1

假设你的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 demo，为简单起见，使用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 demo，（如上所述使用background-color代替background=image）。

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

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

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

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

关于JavaScript的指导和参考，我建议（几乎所有其他方面）通过Mozilla开发者网络JavaScript documentation阅读。

参考文献：

在JavaScript中，通过条件语句更改css的正确语法是什么？

1 个答案: