用JQuery操作元素的style属性

Posted 2020-10-10 ysx_小鱼

可以直接利用css()方法获取元素的样式属性，JQuery代码如下：

$("p").css("color");  //获取p元素的样式颜色

无论color属性是外部CSS导入，还是直接拼接在html元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的单个样式，例如：

$("p").css("color","red");  //设置p元素的样式颜色为红色

与attr()方法一样，css()方法也可以同时设置多个样式属性，代码如下：

//同时设置字体大小和背景色

$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"})；

如果值是数字，将会被自动转化为像素值。在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，比如上面的代码，如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。总之建议大家加上引号，养成良好的习惯。

对透明度的设置，可以直接使用opacity属性，jQuery已经处理好了兼容性的问题，如下代码所示，将p元素的透明度设置为半透明：

$("p").css("opacity","0.5");

如果需要获取某个元素的height属性，则可以通过如下JQuery代码实现：

$(element).css("height");

在jQuery中还有另外一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值(px)：

$("p").height();    //获取p元素的高度值

height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px。如果要用其他单位（例如em），则必须传递一个字符串，JQuery代码如下：

$("p").height("100px"); //设置p元素的高度值为l00px

$("p").height("2em");   //设置p元素的高度值为2em

1. 在jQuery l.2版本以后的height()方法可以用来获取window和document的高度。
2. 两者的区别是：css()方法获取的高度值与样式的设置有关，可能会得到“auto”，也可能得到”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值(px)。

$("p").width()； //获取p元素的宽度值

同样，width()方法也能用来设置元素的宽度。

$("p").width("400px");   //设置p元素的宽度值为400px

offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。例如用它米获取p元素的的偏移量：

var offset = $("p").offset();   //获取p元素的offset()

var left = offset.left;   //获取左偏移

var top =  offset.top;    //获取右偏移

position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。JQuery代码如下：

var position = $("p").position();    //获取p元素的position()

var left = position.left;    //获取左偏移

var top = position.top;    //获取右偏移

scrollTop()方法和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取p元素的滚动条距离：

var $p =  $("p");

var scrollTop = $p.scrollTop();    //获取元素的滚动条距顶端的距离

var scrollLeft = $p.scrollLeft()；    //获取元素的滚动条距左侧的距离

另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置：

$("textarea").scrollTop (300);    //元素的垂直滚动条滚动到指定的位置

$("textarea").scrollLeft (300); //元素的横向滚动条滚动到指定的位置

至此，已经将jQuery中常用的DOM操作（包括DOM Core，HTML-DOM和CSS-DOM）都已经介绍完毕。