jquery - 使用 JQuery 动态设置 DOM 元素高度的最佳方法？

Question

我都用过$('#element').css('height', 10)和$('#element').height(10)。哪种方法是更好的做法？还是他们都以完全相同的方式改变高度？

Answer 1

不同之处在于，.css()您只是指定内联样式属性的值，而height()尝试设置框的高度。从文档：

请注意， .height(value) 设置盒子的内容高度，而不考虑 CSS box-sizing 属性的值。

请参阅this fiddle以演示差异，并查看源代码的相关部分

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()这两者之间更好（原样），但仅仅是因为.css()不应该将整数作为参数......它应该是.css('height', '10px').

一般来说，我更喜欢使用.css()它，因为我确切地知道它要做什么（设置元素样式），而.height()以神秘的方式工作（即使简单，也不是很明显）。

此外.css()，您还可以将高度设置为'45%'or 'auto'，而您无法使用.height()

Answer 4

从JQuery height()文档中：

.css('height') 和 .height() 之间的区别在于后者返回一个无单位的像素值（例如，400），而前者返回一个单位完整的值（例如，400px）。当需要在数学计算中使用元素的高度时，建议使用 .height() 方法。