jQuery获取设置样式

html-css022

jQuery获取设置样式,第1张

css()方法

获取或设置样式

对以下html标签进行样式的获取和设置

css()方法设置参数,参数为要设置的样式名

可用驼峰命名也可用css命名方式。注意样式名需要加''

点击获取按钮,结果:

但是在IE浏览器里,用 console.log($('#div1').css('border'))可能会不显示或出现undefined。

在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如:

console.log($('#div1').css('Border-top-width'))//2px

获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如:

console.log($('div').css('width'))//200px

css(样式名,样式值)

设置的样式是行内样式

单样式里样式名必须在''里,宽高度单位px可不写,这时300可不加'',如果加px,则必须为'300px'

多样式里样式名可不加''。但是 background-color:'green' 这样写报错。

给多个div一起设置样式

隐式迭代,把每一个div都设置了同样的样式

使用css控制页面有4种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式。

行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100pxheight:100px"></div>

内嵌样式即写在style标签中,例如<style type="text/css">div{width:100pxheight:100px}</style>

链接式即为用link标签引入css文件,例如<link href="test.css" type="text/css" rel="stylesheet" />

导入式即为用import引入css文件,例如@import url("test.css")

如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式,如果一个元素的部分样式信息写在内联样式中,一部分写在外部的css文件中,通过style属性是不能获取到元素的完整样式信息的。因此,需要使用元素的计算样式才获取元素的样式信息。