jQuery操作CSS属性的相关方法

最新推荐文章于 2023-01-17 12:46:21 发布

Owen William

最新推荐文章于 2023-01-17 12:46:21 发布

阅读量1.6k

点赞数

分类专栏： jQuery 文章标签： jquery web开发

本文链接：https://blog.csdn.net/owen_william/article/details/51339815

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.前言

jQuery提供了以下几种操作DOM元素CSS样式的方法，包括直接访问、修改DOM元素的class属性值，还提供了访问、修改DOM元素内联CSS属性值的方法，除此之外还提供了大量直接访问、修改DOM元素大小和位置的方法。

jQuery提供的操作CSS属性的相关方法如下。

1) addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上。

2) hasClass(class):判断该jQuery对象是否包含至少一个具有指定CSS定义的DOM对象。

3) removeClass(class):删除jQuery对象所包含的所有DOM对象上指定CSS定义。

4) toggleClass(class):如果添加jQuey对象包含的所有DOM对象上具有指定的CSS定义，则删除该CSS定义；否则添加该CSS定义。

5) css(name):返回该jQuery对象包含的第一个匹配的DOM对象上名为naem的CSS属性值。

6) cssname,value):为jQuery对象包含的所有DOM对象设置单个CSS属性值。

7) css(properties):为jQuery对象包含的所有DOM对象同时设置多个CSS属性值。

8) offset():获取jQuery对象包含的第一个匹配的DOM对象相对于该文档的位置。

9) position():获取jQuery对象包含的第一个匹配的DOM对象相对于其父元素的位置。

10) scrollTop():获取jQuery对象包含的第一个匹配所有的DOM对象的scroll top值。

11) scrollTop(val):设置jQuery对象里包含的所有DOM对象的scrollleft值。

12) scrollLeft():获取jQuery对象包含的所有DOM对象的scrollleft值。

13) scrollLeft(val)：获取jQuery对象包含的所有DOM对象的scrollleft值。

14) height:返回jQuery对象里第一个匹配元素的当前高度（以px为单位）

15) height(val):设置jQuery对象里所有元素的高度，val的单位为px.

16) width():返回jQuery对象里所有元素的宽度（以px为单位）

17) width(val)：设置jQuery对象里所有元素的宽度，val的单位为px。

2.例子

下面的程序示范了开发自定义CSS属性

 <!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 操作CSS属性的工具方法 </title>
</head>
<body>
<div></div>
<div></div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
(function($)
{
	var _patterns = 
	{
		"msie": "progid:DXImageTransform.Microsoft.Gradient(" +
			"StartColorStr='{0}', EndColorStr='{1}', GradientType=0)",
		"msie10": "-ms-linear-gradient(top, {0} 0%, {1} 100%)",
		"mozilla": "-moz-linear-gradient(top, {0} 0%, {1} 100%)",
		"opera": "-o-linear-gradient(top, {0} 0%, {1} 100%)",
		"webkit": "-webkit-linear-gradient(top, {0} 0%, {1} 100%)",
		"unknown": "-webkit-linear-gradient(top, {0} 0%, {1} 100%)"
	};
	// 定义一个获取浏览器名称的函数
	var browserName = function() 
	{
		var ua = $.browser;
		if (ua.mozilla) return "mozilla";
		else if(ua.opera) return "opera";
		else if(ua.webkit) return "webkit";
		// 判断是否为IE 10。如果IE 10，则返回msie10
		else if(ua.msie) return ua.version.split('.')[0] > 9
			? "msie10" : "msie";
		else return "unknown";
	}
	// 定义函数，针对不同浏览器生成CSS属性值
	var genCssString = function(colorStr, browser)
	{
		// 获取不同浏览器对应的CSS属性值模板
		var reStr = _patterns[browser];
		if (!reStr) return null;
		// 将colors按逗号分隔成两个字符串
		var colors = colorStr.split(',');
		if (colors.length != 2) return;
		// 将{0}占位符替换成colors[0]
		// 将{1}占位符替换成colors[1]
		return reStr.replace(/\{0\}/, colors[0])
			.replace(/\{1\}/, colors[1]);
	};
	$.cssHooks["lineGradBackground"] = 
	{
		get: function (elem, computed, extra)
		{
			return elem.style.background;
		},
		set: function (elem, value)
		{
			// 获取浏览器版本
			var b = browserName();
			// 根据不同浏览器设置不同的background属性值
			// 对于早期版本的IE浏览器，应该使用filter属性
			elem.style[b == "msie" ? "filter" : "background"]
				= genCssString(value, b);
		}
	};
})(jQuery);
$("body>div").width(300)
	.height(40)
	.css("padding" , 30);
$("body>div:first").css("lineGradBackground", "#e2f, #efe");
$("body>div:last").css("lineGradBackground", "#fff, #111");
</script>
</body>
</html>

3.运行结果

Owen William

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作CSS属性的相关方法

1.前言jQuery提供了以下几种操作DOM元素CSS样式的方法，包括直接访问、修改DOM元素的class属性值，还提供了访问、修改DOM元素内联CSS属性值的方法，除此之外还提供了大量直接访问、修改DOM元素大小和位置的方法。jQuery提供的操作CSS属性的相关方法如下。 1) addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DO
复制链接

扫一扫

专栏目录