element.styleプロパティ

投稿日: 2013年8月12日 作成者: alphasis

element.styleは、styleオブジェクトを参照するプロパティ。

構文

var $style = $elementNodeReference.style;

戻り値

styleオブジェクトへの参照。

サンプル

  • Black
  • Purple
  • Red
  • Blue
  • Green
  • Orange
  • Pink
  • Lime
  • Aqua
  • Yellow
  • Beige

特定の色をクリックすると、ここの背景色を変更する。


現在の背景色：

サンプルの動作について

「Black」と書かれた黒色の部分をクリックすると、ベージュの背景色が黒色に変わる。他の色も同様にクリックで動作する。

「getBackgroundColor()」ボタンをクリックすると、「現在の背景色：」の右横に現在の背景色のカラーネームを表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function changeBackgroundColor( $color ){
 document.getElementById( 'cbc' ).style.backgroundColor = $color;
}
function getBackgroundColor(){
 var $color = document.getElementById( 'cbc' ).style.backgroundColor;
 document.getElementById( 'sapmleOutPut' ).innerHTML = $color;
}
</script>

CSS

<style type="text/css">
<!--
ul#change-background-color {
    list-style-type: none;
}
ul#change-background-color li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 50px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
}
-->
</style>

HTML

<div id="cbc" style="background-color:beige;height:150px;">
 <ul id="change-background-color">
  <li style="background-color:black;color:white;" onClick="changeBackgroundColor( this.style.backgroundColor )">Black</li>
  <li style="background-color:purple;color:white;" onClick="changeBackgroundColor( this.style.backgroundColor )">Purple</li>
  <li style="background-color:red;color:white;" onClick="changeBackgroundColor( this.style.backgroundColor )">Red</li>
  <li style="background-color:blue;color:white;" onClick="changeBackgroundColor( this.style.backgroundColor )">Blue</li>
  <li style="background-color:green;color:white;" onClick="changeBackgroundColor( this.style.backgroundColor )">Green</li>
  <li style="background-color:orange;color:black;" onClick="changeBackgroundColor( this.style.backgroundColor )">Orange</li>
  <li style="background-color:pink;color:black;" onClick="changeBackgroundColor( this.style.backgroundColor )">Pink</li>
  <li style="background-color:lime;color:black;" onClick="changeBackgroundColor( this.style.backgroundColor )">Lime</li>
  <li style="background-color:aqua;color:black;" onClick="changeBackgroundColor( this.style.backgroundColor )">Aqua</li>
  <li style="background-color:yellow;color:black;" onClick="changeBackgroundColor( this.style.backgroundColor )">Yellow</li>
  <li style="background-color:beige;color:black;" onClick="changeBackgroundColor( this.style.backgroundColor )">Beige</li>
 </ul>
 <div style="clear: both; padding: 30px;">
  <p>特定の色をクリックすると、ここの背景色を変更する。</p>
 </div>
</div>
<p style="margin-top: 10px;"><button onClick="getBackgroundColor()">getBackgroundColor()</button><br />現在の背景色：<span id="sapmleOutPut"></span></p>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス, 参照, 逆引き パーマリンク