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

时间:2013-08-08 18:20:55

标签: jquery html

我同时使用了$('#element').css('height', 10)$('#element').height(10)。哪种方法更好?或者他们都以完全相同的方式改变高度?

4 个答案:

答案 0 :(得分:2)

不同之处在于,.css()只是指定了内联样式属性的值,而height()尝试设置框的高度。来自 the docs

  

请注意,.height(value)设置框的内容高度,无论如何   CSS box-sizing属性的值。

请参阅 this fiddle 以了解差异,并查看 relevant part of the source code

答案 1 :(得分:1)

.height()在这两者之间更好(按原样),但只是因为.css()不应该将整数作为参数...它应该是.css('height', '10px')

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

此外.css()允许您将高度设置为'45%''auto',而您无法使用.height()

完成这些操作

答案 2 :(得分:1)

除了需要为css()指定'px'之外,看起来没有一个巨大的差异。就像m90在评论中所说(并且你可以在他们发布的小提琴中看到),每个都受到边框属性的不同影响(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

答案 3 :(得分:0)

来自JQuery height()文档:

  

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