jQueryCSS操作


句法

  • .css(cssProperty)//获取渲染的CSS属性值
  • .css([cssProperty,...])//从Array of cssProperties中获取值
  • .css(cssProperty,value)//设定值
  • .css({cssProperty:value,...})//设置属性和值
  • .css(cssProperty,function)//将cssProperty公开给回调函数

备注

渲染值

如果使用了响应单元(如"auto""%""vw"等) "vw" px .css()将返回px的实际渲染值

.myElement{ width: 20%; }
var width = $(".myElement").css("width"); // "123px" 

格式化属性和值

可以使用标准CSS格式作为String或使用camelCase来定义属性

"margin-bottom"
marginBottom

应以String表示。 jQuery在内部将数值视为px单位

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

从jQuery 3开始,避免使用.show().show() .hide()

根据这个jQuery博客文章 ,由于开销和性能问题,你不应该再使用.show().show() .hide()

如果样式表中的元素设置为display: none ,则.show()方法将不再覆盖该元素。因此,迁移到jQuery 3.0最重要的规则是:不要使用样式表来设置默认的display: none ,然后尝试使用.show() - 或任何显示元素的方法,例如.slideDown().fadeIn() - 使其可见。如果您需要默认隐藏元素,最好的方法是在元素中添加类似“hidden”的类名,并在样式表中定义要display: nonedisplay: none 。然后,您可以使用jQuery的.addClass().removeClass()方法添加或删除该类,以控制可见性。或者,您可以在元素显示在页面上之前使用.ready()处理程序调用.hide() 。或者,如果您确实必须保留样式表默认值,则可以使用.css("display", "block") (或相应的显示值)来覆盖样式表。

CSS操作 相关例子