jquery - JQueryでDOM要素の高さを動的に設定する最良の方法は?

Question

と の両方を使用$('#element').css('height', 10)しまし$('#element').height(10)た。どの方法がより良い方法ですか? それとも、両方ともまったく同じ方法で高さを変更しますか?

Answer 1

違いは、ボックスの高さを設定しようとするの.css()に対し、インライン スタイル プロパティの値を指定するだけであるということです。ドキュメントheight()から：

.height(value) は、CSS の box-sizing プロパティの値に関係なく、ボックスのコンテンツの高さを設定することに注意してください。

違いのデモンストレーションについてはこのフィドルを参照し、ソースコードの関連部分も見てください

Answer 2

css() に 'px' を指定する必要があるという事実以外に、大きな違いはないようです。m90 がコメントで述べたように (そして投稿されたフィドルでわかるように)、それぞれが border-box プロパティによって異なる影響を受けます (css() はパディングを考慮して高さに含めますが、height() はしません) ）、どちらを使用するかを決定する際には、これも考慮する必要があります。

jQuery API では、height() について次のように述べています。

Note that .height(value) sets the content height of the box regardless of the 
value of the CSS box-sizing property.

速度に関しては、これを見つけました：http://jsperf.com/jquery-css-height-vs-method-height/2

別の一般的なリンクは次のとおりです。http://jquerybyexample.blogspot.com/2010/08/width-vs-csswidth-and-height-vs.html

Answer 3

.height()これら2つの間で（そのまま）の方が優れて.css()いますが、整数をパラメーターとして受け取ることが想定されていないためです...それは.css('height', '10px').

一般に、私.css()はそれが何をするか (要素のスタイルを設定する) を正確に知っているので、使用することを好みます.height()が、不思議な方法で機能します (たとえ単純であっても、すぐには明らかではありません)。

さらに.css()、高さを'45%'またはに設定できます'auto'が、これらのことはできません.height()