jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式

最新推荐文章于 2023-05-26 17:53:41 发布

店伙计

最新推荐文章于 2023-05-26 17:53:41 发布

阅读量6k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/112189175

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/112189175，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

在 jQuery 中，使用 css 方法可以设置元素的 CSS 样式。

一、获取元素的样式

在原生的 JS 中，需要使用 getComputedStyle() 方法来获得元素的样式值，例如：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.a {
			width: 200px;
			height: 200px;
			transition: 0.7s;
		}
		.b {
			background: #ccc;
		}
		.c {
			box-shadow: 0 0 10px black;
		}
	</style>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		onload = function (){
			console.log(getComputedStyle(mydiv)['backgroundColor']);
			console.log(getComputedStyle(mydiv)['width']);
		}
	</script>
</head>
<body>
	<div id='mydiv' class="a b"></div>
</body>
</html>

在 jQuery 中，将原生的方法封装到 css() 方法中，所以可以直接使用 css() 方法来获取元素属性：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.a {
			width: 200px;
			height: 200px;
			transition: 0.7s;
		}
		.b {
			background: #ccc;
		}
		.c {
			box-shadow: 0 0 10px black;
		}
	</style>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			console.log($('#mydiv').css('width'));
			console.log($('#mydiv').css('backgroundColor'));
		})
	</script>
</head>
<body>
	<div id='mydiv' class="a b"></div>
</body>
</html>

需要注意的一点，css() 方法获取元素属性值时，如果元素的属性值单位是 cm 时，则会自动转换为 px；

二、设置元素的样式

使用 css() 方法可以为元素设置单个样式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('#mydiv').css('width','100px');
		})
	</script>
</head>
<body>
	<div id='mydiv'></div>
</body>
</html>

如果要设置多个样式，可以使用链式调用的方法：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('#mydiv').css('width','100px').css('height','100px').css('background','red');
		})
	</script>
</head>
<body>
	<div id='mydiv'></div>
</body>
</html>

不过链式调用的方法过于麻烦，所以还可以使用传递 JSON 对象的方式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('#mydiv').css({
				'width':'100px',
				'height':"100px",
				'background':'#ccc'
			});
		})
	</script>
</head>
<body>
	<div id='mydiv'></div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/112189175，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

店伙计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式

在 jQuery 中，使用 css 方法可以设置元素的 CSS 样式。一、获取元素的样式在原生的 JS 中，需要使用 getComputedStyle() 方法来获得元素的样式值，例如：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .a { width: 200px; height: 200px; transit
复制链接

扫一扫