在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 Fiddle演示,(使用,如上所述,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().