Question

如何更改ID为“ rvolatgeDiv”的div的类名。我想在警报功能中更改div的类名称。

代码段：

function alarm() {
  //var value = document.getElementById("rvoltage").innerHTML;
  if ( rvoltage > 160 ||  rvoltage == 0 ) {
      document.getElementById('alarm').play();
      var img = document.getElementById('myImageId');
      img.style.visibility = 'visible';

      var div = document.getElementById('rvolatgeDiv');
      div.className="w3-col l3 w3-border  w3-red w3-xxlarge w3-text-black";
  }
}

<div class="w3-row-padding">
   <div id="rvolatgeDiv" class="w3-col l3 w3-border  w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
      R-Voltage
      <br><br>
      <label id="ib1" class="w3-text-white"></label>
    </div>
    <div class="w3-col l3 w3-border w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
       Y-Voltage
       <br><br>
       <label id="ib2" class="w3-text-white"></label>
    </div>
    <div class="w3-col l3 w3-border w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
       B-Voltage
       <br><br>
       <label id="ib3" class="w3-text-white"></label>
    </div>
    <div class="w3-col l3 w3-border w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
       Battery-Voltage
       <br><br>
       <label id="ib4" class="w3-text-white"></label>
    </div>
 </div>

Answer 1

尝试一下：
但您必须确保条件为真：
另外您的代码还不完整，所以我注释了未定义的元素。

必须调用功能警报，因为未调用您的代码。

function alarm() {
        //var value = document.getElementById("rvoltage").innerHTML;
      // I declared rvoltage with value of 200 to make the condition true
        var rvoltage = 200;
        if ( rvoltage > 160 ||  rvoltage == 0 ) {
            //document.getElementById('alarm').play();
            var img = document.getElementById('myImageId');
            //img.style.visibility = 'visible';

            var div = document.getElementById('rvolatgeDiv');
            div.className="w3-col l3 w3-border  w3-red w3-xxlarge w3-text-black";
        }
    }
    // you can call the function here  or as on event like button click
    //alarm();

.w3-red {
 color:red;
 }

<div class="w3-row-padding">
            <div id="rvolatgeDiv" class="w3-col l3 w3-border  w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
                R-Voltage
                <br><br>
                <label id="ib1" class="w3-text-white"></label>

            </div>
            <div class="w3-col l3 w3-border w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
                Y-Voltage
                <br><br>
                <label id="ib2" class="w3-text-white"></label>
            </div>
            <div class="w3-col l3 w3-border w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
                B-Voltage
                <br><br>
                <label id="ib3" class="w3-text-white"></label>
            </div>
            <div class="w3-col l3 w3-border w3-gray w3-xxlarge w3-text-black" style="height:30%; text-shadow:1px 1px 0 white;">
                Battery-Voltage
                <br><br>
                <label id="ib4" class="w3-text-white"></label>
            </div>
        </div>
        <!-- added button to check rvoltage -->
        <button onclick="alarm()">Check rvoltage</button>

Answer 2

假设您必须从div中删除类w3-gray，则需要进行更改

div.className="w3-col l3 w3-border  w3-red w3-xxlarge w3-text-black";

到

div.classList.remove("w3-gray");

要再次添加它，可以使用：

div.classList.add("w3-gray");

您可以从here了解有关classList的更多信息

Answer 3

window.onload = function()
{
    var divA=document.getElementById("divA");
    divA.classList.remove("bb");
    divA.classList.add("abc");
};

</script>
<div id="divA" class="aa bb">
    Testing
</div>

结果

<div id="divA" class="aa abc">
Testing
</div>

无法使用javascript更改html页面的div类

3 个答案: