jquery中直接给css赋值与通过css对象进行进行赋值的区别

在平常书写样式的时候，很多时候会通过

js

给

html

元素进行样式控制。一般我们会使用一下几种方法进行赋值：

$("#userName").height("40"); //方法一
$("#userName").css({           //方法二
"height":"40px"
})

正如上面代码所示，平常可能很多朋友都会使用这两种方式进行样式控制。可是大多数人并没注意两者之间的区别。其中方法一直接给元素赋值也就是说元素会包含了其自身的一些默认样式；方法二赋值后元素会忽略其默认的属性以

css

控制的样式为准。eg:

<style>
#userName{
box-sizing: border-box;
}
</style>
<input id="userName" type="input">

如果使用

方法一

设置样式,通过浏览器观察到的高度为

46px

,也就是说包含了其默认的

边框padding

等值。

$("#userName").height(40);

如果使用

方法二

设置样式,通过浏览器观察到的高度为

40px

为设置的高度，不含默认样式。

$("#userName").css({
"height":"40px"
})

此结论为个人尝试得出的结论，如果有错误之处望指正。两个简单的小细节希望能对你有用。