jquery css方法的三种使用,调用时可以传入对象

最新推荐文章于 2023-01-03 12:20:31 发布

黄大仙No.1

最新推荐文章于 2023-01-03 12:20:31 发布

阅读量629

点赞数

分类专栏： jQuery 文章标签： js css javascript jquery

本文链接：https://blog.csdn.net/qq_44378358/article/details/108237732

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。

说明	示例
1.参数只写属性名，则是返回属性值	$(this).css(“color”’);
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号	$(this).css(“color”, “red”’);
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号	$(this).css({ “color”:“white” ;," font-size":" 20px”;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			div {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
            // 操作样式css方法
            $(function () {
                var width = $('div').css('width');
                console.log(width)      //输出属性值
                var div = $('div').css('width', '300px')
                var div = $('div').css('width', 300)
                console.log(div.css('width'))
                // 可以写成对象, 属性和数字可以不加引号
                $('div').css({
                    width: 400,
                    height: 300,
                    backgroundColor: 'pink'
                })
            })
		</script>
	</body>
</html>