日別アーカイブ: 2011 . 12 / 26

jQueryの$.css(‘width’)や$.css(‘height’)取得はcssを設定していなくても実際の値が返ってくる

jQueryので幅や高さを取得する場合はwidth()メソッドやheight()メソッドが便利だが、
css()メソッドを使用して$.css(‘width’)や$.css(‘height’)でも取得できる。
でも単純にcssで設定されている値を取得したい場合には邪魔になる機能だったりする。
css()メソッドはCSSとして設定していないのに数値pxが返ってくるらしい。(jquery1.7.1で検証)

この場合はget()メソッドを使用して一度DOMを取得してからDOM.style.widthやDOM.style.heightを参照するとよい。

[HTML]
<div id=”test”>TEST</div>
<script>
console.log($(‘#test’).css(‘width’));//出力:’1345px’ (実際の大きさ)
console.log($(‘#test’).get(0).style.width);//出力:” (空)
</script>

[/HTML]