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

Question

这是我所拥有的，我知道这是不对的。 基本上，我试图说，“如果div的高度为34，则将背景图像更改为此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演示 ，使用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小提琴演示 ，（使用，如上所述， background-color而不是background=image ）。

如果要使用JavaScript库，则可以在某种程度上进行简化。 使用jQuery（例如，尽管我不是特别提倡jQuery，但它只是我最熟悉的库），以上内容可以重写为：

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

JS小提琴演示 ，（再次使用background-color而不是background=image ）。

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

有关JavaScript的指导和参考，我建议（几乎所有其他内容）阅读Mozilla Developer Network的JavaScript文档 。

参考文献：

• currentStyle对象 。
• Element.style 。
• for () {/*...*/} 。
• jQuery库 。
• parseInt() 。
• window.getComputedStyle() 。