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 変更したい属性値



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



おすすめのJavaScript本

このサイトのコンセプトは、「実務で使う可能性が高いものだけを精査して掲載する」です。

これは、逆引き本を使っていて、「実務で使うには便利だな」と思ったことがきっかけになっています。

↓その本がコチラ。自分も愛用しています。



[Java Script - Java Script - CSS]


Classを変える(指定する)  【className】


  

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






-