JavaScript CSS display

Question

<style>内にdisplay:noneを記述し適応させた場合にJavaScriptで操作できないのはなぜでしょうか 操作不能の記述で操作する事は不可能なのでしょうか 追記 div.classList.remove("none")で操作することはできましたが、 なぜdisplayでは不可能なのかご存知の方教えて下さい style内に定義していてもプロパティの変更はできる なぜdisplayだけできない仕様なのかわからない ```ここに言語を入力 <style> .c{ color:black; } </style> <div id="div" class="c">ああああ</div> <input type="button" value="表示" onclick="div.style.color='red'"> <input type="button" value="非表示" onclick="div.style.color='black'"> ```

操作不能

<style>
.none{
display:none;
}
</style>

<div id="div" class="none">ああああ</div>
<input type="button" value="表示" onclick="div.style.display=''">
<input type="button" value="非表示" onclick="div.style.display='none'">

この記述だと操作可能

<div id="div" style="display:none">ああああ</div>
<input type="button" value="表示" onclick="div.style.display=''">
<input type="button" value="非表示" onclick="div.style.display='none'">

Answer 1

class属性とstyle属性は違うからです。
↓属性と属性値について
https://9lio.com/column/html-attribute-and-attribute-value/

下記コードで表示ボタンを押した場合

<style>
.c{
color:black;
}
</style>

<div id="div" class="c">ああああ</div>
<input type="button" value="表示" onclick="div.style.color='red'">
<input type="button" value="非表示" onclick="div.style.color='black'">

<div id="div" class="c">ああああ</div> ↓ <div id="div" class="c" style="color:red">ああああ</div> となり、classの値よりstyleの値が優先されるため、色が黒から赤に変わります。

一方下記コードで表示ボタンを押した場合

<style>
.none{
display:none;
}
</style>

<div id="div" class="none">ああああ</div>
<input type="button" value="表示" onclick="div.style.display=''">
<input type="button" value="非表示" onclick="div.style.display='none'">

<div id="div" class="none">ああああ</div> ↓ <div id="div" class="none" style="">ああああ</div> となるため何も起こりません。

なので一例として、下記コードのように修正する必要があります。

<style>
.none{
display:none;
}
</style>

<div id="div" class="none">ああああ</div>
<input type="button" value="表示" onclick="div.style.display='block'">
<input type="button" value="非表示" onclick="div.style.display='none'">