Java Script Java Script CSS属性値を変える

-

Topページ　 >　 お勉強　 >　 Java Script　 >　 CSS属性値を変える　

CSS属性値を変える

▲

エレメントに対して、CSSの属性値を動的に変更します。




▲

1. 使用例です。

[HTML]
<span id="targetBox">このSpanのCSS属性値を変える</span>
：
：
[JavaScript]
var box = document.getElementById('targetBox');

// CSSのbackgroundColor属性を変えて背景を青くする
box.style.backgroundColor = "#BBCCDD";


▲

element .style. attribute = value


element CSS属性値を変更するエレメント
attribute 変更したい属性
属性(一例)説明使用例
backgroundColor背景色style.backgroundColor = "#BBCCDD"
color文字色style.color = "#BBCCDD"
visibility表示非表示 style.visibility = "hidden" style.visibility = "visible"
position 位置指定 style.position = "absolute"
borderWidth 枠線の太さ style.borderWidth = "2px"
borderColor 枠線の色 style.borderColor = "#645fa7"
borderStyle 枠線の種類 style.borderStyle = "solid"
width 幅 style.width = "100px"
height 高さ style.height = "200px"
top 上位置 style.top = 10
left 左位置 style.left = 10
value 変更したい属性値


ファイル一式をダウンロードする
▲

↓インラインフレーム内でサンプルが動作しています。



▲

[Java Script - Java Script - CSS]

Classを変える（指定する） 　【className】

Topページ　 >　 お勉強　 >　 Java Script　 >　 CSS属性値を変える　




-