SE学院 / JavaScript / element / style
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 プロパティ）
bottom
下からの位置（CSS の bottom プロパティ）
color
テキストの色（CSS の color プロパティ）
display
表示方法（CSS の display プロパティ）
height
高さ（CSS の height プロパティ）
left
左からの位置（CSS の left プロパティ）
lineHeight
行の高さ（CSS の line-height プロパティ）
maxHeight
高さの最大値（CSS の max-height プロパティ）
maxWidth
幅の最大値（CSS の max-width プロパティ）
minHeight
高さの最小値（CSS の min-height プロパティ）
minWidth
幅の最小値（CSS の min-width プロパティ）
overflow
領域をはみ出した要素の扱いを指定する（CSS の overflow プロパティ）
position
要素の表示位置を指定する際の基準点（CSS の position プロパティ）
right
右からの位置（CSS の right プロパティ）
rubyAlign
ルビ（振り仮名）の配置（CSS の ruby-align プロパティ）
top
上からの位置（CSS の top プロパティ）
verticalAlign
垂直方向の揃え方（CSS の vertical-align プロパティ）
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>この要素のスタイルが変ります。
赤色
黒色
非表示
ブロック要素