3.2.12: jQuery的DOM操作之CSS-DOM操作

confirmAname

于 2014-01-02 02:03:15 发布

阅读量486

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/confirmAname/article/details/17744285

本文深入探讨了CSS-DOM技术在jQuery框架中的应用，详细介绍了如何使用css()方法读取和设置元素样式属性，以及offset()和position()方法获取元素位置信息。文章还展示了如何同时设置多个样式属性，提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常的简单。

可以直接利用css()方法获取元素的样式属性：

$("p").css("color")

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

$("p").css("color","blue");

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

$("p").css({"color":"red","font-weight":"bold","opacity":"0.2"});

此外，在CSS-DOM中，还有以下几个经常使用的方法：

1. offset()方法：

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

<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var $offset=$("p").offset();
		alert($offset.left);
		alert($offset.top);
	});
</script>

2. position()方法：