selection.style - スタイルを確認、変更する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのselection.style()は、要素に設定されているスタイルの値を確認したり、変更したりするためのAPIです。

サンプルコード

<p>SYNCER</p>

// p要素を取得
var selection = d3.select( "p" ) ;

// [font-size]の値を確認
var fontSize = selection.style( "font-size" ) ;

// [font-size]の値を変更
selection.style( "font-size", "24px" ) ;

// [font-size]と[color]を一括で変更
selection.style( { "font-size": "24px", "color": "green" } ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>スタイルを操作しよう。</p> <p id="element" class="aaa">SYNCER</p> <ul> <li><a id="method1">[font-size]は？</a></li> <li><a id="method2">[font-size]を24pxに変更</a></li> <li><a id="method3">[font-size]と[color]を一括で変更</a></li> <li><a id="method4">リセット</a></li> </ul>

ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } code { background: #f2f2f2 ; }

// p要素を取得 var selection = d3.select( "#element" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // [font-size]の値を確認 var fontSize = selection.style( "font-size" ) ; // 自身のテキストに反映 this.textContent = "[font-size]は？→" + fontSize ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // [font-size]を[24px]に変更 selection.style( "font-size", "24px" ) ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // [font-size]と[color]を一括で変更 selection.style( { "font-size": "32px", "color": "green" } ) ; } // クリックイベント4 document.getElementById( "method4" ).onclick = function() { // リセット selection.style( { "font-size": "16px", "color": "#000" } ) ; }

構文

value || selection = selection.style( object || name [, value || function || null ] )

引数
項目	説明
name	対象となる、スタイルのプロパティ名を指定する。DOMのプロパティ名(`marginTop`)ではなく、スタイルシートのプロパティ名(`margin-top`)でいい。
value	省略可。第2引数には、第1引数で指定したプロパティに新しくセットしたい値を指定する。
null	第2引数に`null`を指定した場合、適用されているスタイルが削除されて初期値に戻る。
function	第2引数に指定する値を、関数にすることもできる。ここで指定した関数は、第1引数に要素に関連付けられたデータ、第2引数にインデックス番号をとる。また、`this`で要素を参照できる。戻り値が値として設定される。
object	複数のプロパティのスタイルを一括で変更するには、第1引数にオブジェクトリテラルを指定する。例えば、`{ "font-size": "20px", "color": "red" }`というように指定する。

戻り値
項目	説明
value	引数を1つだけ指定した場合は、そのプロパティに設定されている値が戻り値となる。
selection	引数を2つ指定してスタイルを変更した場合、d3.selectionオブジェクトが戻り値となる。

ノート

1つなら確認: 引数を1つ指定するとスタイルのプロパティに設定されてる値の確認となる。
2つなら変更: 引数を2つ指定するとスタイルのプロパティに新しく値を設定する。
nullなら削除: nullを指定すれば、そのスタイルを削除することができる。
一括ならオブジェクト: 複数のプロパティの値を一括で変更するには、オブジェクトリテラルで値を指定する。