jQuery - 操作元素的style属性(元素的css样式、透明度、宽高、位置)
一、获取、修改 css 样式属性
1,使用 css() 方法获取元素的样式属性
比如下面代码可以获取 p 元素的文字颜色(color)。无论该属性是从外部 CSS 导入,还是直接拼接在 HTML 元素里(内联),css() 方法都可以获取到 style 里的值。
$("p").css("color"); //获取p元素的文字颜色
2,css() 方法也可以用来设置元素的样式
(1)比如设置某个元素的单个样式。
(2)也可以同时设置多个样式属性。
$("p").css("color","orange"); //将p元素的文字颜色设置为红色
(2)也可以同时设置多个样式属性。
//同时设置p原色的字体大小,以及背景颜色 $("p").css({"fontSize":"25px" ,"backgroundColor":"orange"});

3,属性值注意事项
如果设置的样式属性值是数字,将会被自动转化为像素值。比如下面两种写法效果都是一样的。
$("p").css("fontSize", 25); //方式1 $("p").css("fontSize", "25px"); //方式1
4,属性名注意事项
(1)对于那些带有“-”符号的属性,例如 font-size 和 background-color 属性。如果我们使用驼峰式写法,那么设置该属性时可以加上引号,也可以不加。
(2)如果不使用驼峰式写法,那么该属性一定要加上引号。
$("p").css({"fontSize":"25px" ,"backgroundColor":"orange"}); //属性名带引号 $("p").css({fontSize:"25px" ,backgroundColor:"orange"}); //属性名不带引号
(2)如果不使用驼峰式写法,那么该属性一定要加上引号。
$("p").css({"font-size":"25px" ,"background-color":"orange"}); //带-属性名带引号
二、设置透明度
要设置透明度,可以直接使用 opacity 属性,jQuery 已经处理好了兼容性的问题。
(1)下面将 p 元素设置为半透明。

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

(2)下面代码使 p 元素变成半透明时,带有动画效果。
//在1秒种内将p元素变成半透明 $("p").animate({opacity: .5}, 1000, function() { //动画播放完毕 });
三、获取、设置元素的高度和宽度
1,获取元素的高度、宽度
(1)可以通过 css() 方法获取元素的 height、width 属性。

(2)还可以通过 jQuery 提供的 height()、width() 方法的得到元素当前计算的高度值(px)

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

(2)还可以通过 jQuery 提供的 height()、width() 方法的得到元素当前计算的高度值(px)
$("p").height(); //获取p元素的高度 $("p").width(); //获取p元素的宽度

(3)两种方式的区别:
(2)如果要用其他单位(例如 em),则必须传递一个字符串:
- css() 方法获取的高度、宽度值与样式的设置有关,可能会得到“auto”,也可能得到“10px”之类的字符串。
- height()、width() 方法获取的高度、宽度值则是元素在页面中的实际高度,与样式的设置无关,并且不带单位。
2,设置元素的高度、宽度
(1)height()、width() 方法也可以用来设置元素的高度、宽度。如果传递的值是一个数字,则默认单位为 px。下面两种写法效果是一样的:
$("p").height(100); //设置p元素的高度值为100px $("p").height("100px"); //设置p元素的高度值为100px
(2)如果要用其他单位(例如 em),则必须传递一个字符串:
$("p").height("2em"); //设置p元素的高度值为2em
3,获取窗口的高度、宽度
height()、width() 方法还可以用来获取 window 和 document 的高度、宽度。
var w1 = $(window).width(); var h1 = $(window).height(); console.log("window宽度:" + w1); console.log("window高度:" + h1); var w2 = $(document).width(); var h2 = $(document).height(); console.log("document宽度:" + w2); console.log("document高度:" + h2);
四、获取元素的偏移量
1,offset() 方法
该方法获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即 top 和 left,它只对可见元素有效。

var offset = $("p").offset(); //获取p元素的offset() var left = offset.left; //获取左偏移 var top = offset.top; //获取上偏移 console.log(offset);

2,position() 方法
该方法的作用是获取元素相对于最近的一个 position 样式属性设置为 relative 或者 absolute 的祖父节点的相对偏移,与 offset() 一样,它返回的对象也包括两个属性,即 top 和 left。
var position = $("p").position(); //获取p元素的position() var left = position.left; //获取左偏移 var top = position.top; //获取上偏移 console.log(position);
