如何使用JavaScript使用CSS文件中的属性显示/隐藏div

Question

I'm looking to show a div that's initial display value is set to "none" in the HTML file. I don't want to use $(object).style.display = "initial" because it doesn't format the page right. I'm sure there is a way to do this. Can anybody help?

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

Default Behaviour for div is Block.

Just change the javascript to the below should be alright. As i use this method for this part. $("graph").style.display = "";

Answer 2

Make a CSS class

.hidden {
  display: none;
}

Toggle it with JS as needed

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