Question

简短又甜蜜，这可以运行吗？

if ( document.getElementById('box').style.background = "red") {
    document.getElementById('box').style.background = "yello"
} else {
    document.getElementById('box').style.background = "green"
}

问题

因此，假设一个ID为“box”的框具有在上述语句之前运行的条件，将背景更改为红色，if语句是否可以将框背景更改为黄色？这可能会令人困惑，但简而言之，您可以使用CSS样式条件，运行一个javascript块，然后更改该元素的CSS吗？

Answer 1

我认为答案是肯定的。但是我猜你的任务不对。你的意思是检查背景颜色是否为红色，然后将其更改为黄色？我在一个jsfiddle中测试过： https://jsfiddle.net/r3y72njf/24/。您也可以在此处查看：https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp。还有一件事，在您的比较中，您必须使用'=='或'==='，'='表示分配。

if ( document.getElementById('box').style.backgroundColor  === "red") {
    document.getElementById('box').style.backgroundColor  = "yelloy"
} else {
    document.getElementById('box').style.backgroundColor  = "green"
}

Answer 2

只需将id="box"属性添加到任何页面上的任何可见元素即可进行测试。

E.g。

在Chrome devtool的元素和控制台标签中：

将id="box"添加到此问题的标题中。
设置其背景并获取返回值。

var c = document.getElementById('box').style.background = "red"。而c是"red"。使用typeof c，c是string。

所以你的回答是肯定的，因为你可以使用string作为条件。但请注意，如果TypeError的目标元素不存在，您可能会获得id="box"。

Answer 3

    if (document.getElementById('box').style.backgroundColor === "red") {
    
    
      document.getElementById('box').style.backgroundColor = "yellow"
    } else {
      document.getElementById('box').style.backgroundColor = "green"
    }

    #box {
      width: 100px;
      height: 100px;
      background: red;
    }

    <div id="box"  style="background-color: red;" ></div>

HTML / CSS语句可以是Javascript条件吗？

3 个答案: