如何使用JavaScript使用CSS文件中的屬性顯示/隱藏div

Question

我希望顯示HTML文件中將div的初始顯示值設置為“ none”的值。 我不想使用$（object）.style.display =“ initial”，因為它不會正確格式化頁面。 我敢肯定有辦法做到這一點。 有人可以幫忙嗎？

JavaScript：

function showPrecip() {
$("slider").style.display = "none";
$("graph").style.display = "initial";}

CSS：

#graph td div {
background-color: #e7f1fd;
border-top: 2px solid #1878f0;
font-weight: bold;
text-align: center;
width: 50px;}

#graph td, #temps {
height: 100px;
vertical-align: bottom;}

HTML：

    <table id="graph">
    </table>
    <div id="temps">
        <input id="slider" type="range" min="0" max="24" step="3" />
    </div>

Answer 1

div的默認行為是“阻止”。

只需將javascript更改為以下內容就可以了。 因為我在這一部分使用了這種方法。 $（“ graph”）。style.display =“”;

Answer 2

制作一個CSS類

.hidden {
  display: none;
}

根據需要使用JS進行切換

function showPrecip() {
  $("slider").addClass("hidden");
  $("graph").removeClass("hidden");
}