JavaScript style object

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

構文

element.style.attribute = value;
element
ドキュメントの要素オブジェクト
attribute
スタイルシートの属性名
value
スタイルシートの属性値

プロパティ

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

backgroundAttachment
背景画像のスクロール（CSS の background-attachment プロパティ）
backgroundColor
背景の色（CSS の background-color プロパティ）
backgroundPositon
背景画像の開始位置（CSS の background-position プロパティ）
backgroundRepeat
背景画像の繰返し（CSS の background-repeat プロパティ）
borderBottom
下側の境界線（CSS の border-bottom プロパティ）
borderLeft
左側の境界線（CSS の border-left プロパティ）
borderRight
右側の境界線（CSS の border-right プロパティ）
borderTop
上側の境界線（CSS の border-top プロパティ）
color
テキストの色（CSS の color プロパティ）
display
表示方法（CSS の display プロパティ）
height
高さ（CSS の height プロパティ）
overflow
領域をはみ出した要素の扱いを指定する（CSS の overflow プロパティ）
rubyAlign
ルビ（振り仮名）の配置（CSS の ruby-align プロパティ） 
<ruby style="ruby-align: start;" id="example">鉄脚梨<rt>ぼけ</ruby>の花
<script>
  let ruby = document.getElementById("example");
  if ('rubyAlign' in ruby.style) {
    console.log(ruby.style.rubyAlign)
  } else {
    console.log("Your browser doesn't support rubyAlign property.");
  }
</script>

鉄脚梨ぼけの花

webkitTouchCallout
CSS の -webkit-touch-callout プロパティ 
let e = document.getElementById("example");
if ('webkitTouchCallout' in e.style) {
  console.log(e.style.webkitTouchCallout)
} else {
  console.log("Your browser doesn't support webkitTouchCallout property.");
}
webkitUserSelect
CSS の -webkit-user-select プロパティ
width
要素の幅（CSS の width プロパティ）

サンプル

<p id="p1">この要素のスタイルが変ります。</p>
<div>
  <button onclick="document.getElementById('p1').style.color='red'">赤色</button>
  <button onclick="document.getElementById('p1').style.color='black'">黒色</button>
  <button onclick="document.getElementById('p1').style.display='none'">非表示</button>
  <button onclick="document.getElementById('p1').style.display='block'">ブロック要素</button>
</div>

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