elementオブジェクトのstyleプロパティを変更することで、要素のスタイルを変更することができる。

elementObject.style.attribute = value;
elementObject
ドキュメントの要素オブジェクト
attribute
スタイルシートの属性名
value
スタイルシートの属性値
<p id="div01">ここの要素のスタイルが変ります。</p>
<div>
  <button onclick="document.getElementById('div01').style.color='red'">赤色</button>
  <button onclick="document.getElementById('div01').style.color='black'">黒色</button>
  <button onclick="document.getElementById('div01').style.display='none'">非表示</button>
  <button onclick="document.getElementById('div01').style.display='block'">ブロック要素</button>
</div>

ここの要素のスタイルが変ります。

styleオブジェクトのプロパティ

JavaScriptのstyleオブジェクトには次のプロパティがある。

styleオブジェクトのプロパティ
プロパティ 説明
webkitTouchCallout CSSの-webkit-touch-calloutプロパティ
webkitUserSelect CSSの-webkit-user-selectプロパティ
スポンサーリンク