1、创建一个名称为css的html文件。
2、在页面中加入一个button按钮，当点击button的时候出发click事件。
3、在加入一个div设置宽和高还有背景色，当button的click事件中用css方法修改该div背景色。
4、文件引入jquery 库。
5、在文档准备方法中加入click点击事件。
6、在click事件中加入css方法设置div的背景色。
7、在浏览器中运行该文件。并点击button设置div的背景色。
JQ为CSS添加样式，可以使用jQuery CSS *** 作 的css() 方法
定义和用法
设置 CSS 属性
设置所有匹配元素的指定 CSS 属性。
$(selector).css(name,value)实例
/*将所有段落的颜色设为红色：*/$("p").css("color","red")
设置多个 CSS 属性/值对
$(selector).css({property:value, property:value, ...})把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
实例
实例$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
})
也可以通过Jquery 属性 *** 作的removeClass、addClass方法移除元素类名或者添加元素类名的方式达到修改元素样式的效果。详细内容可以百度“jQuery 参考手册 - 属性 *** 作”
Jquery 使用addClass()与removeClass()来动态的添加或移出一个css 类，例如：1.$(“#para1”).addClass('highlight')添加一个“highlight”css 类给id为para1的元素。
2.$(‘#para1’).removeClass(‘'highlight')从id为para1的元素中移出一个‘highlight’css类。
具体实例代码如下：
<html>
<head>
<styletype="text/css">
.highlight {
background:green
}
</style>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery add / remove css class example</h1>
<pid="para1">This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
<buttonid="addClass">Add highlight</button>
<buttonid="removeClass">Remove highlight</button>
<scripttype="text/javascript">
$("#addClass").click(function () {
$('#para1').addClass('highlight')
})
$("#removeClass").click(function () {
$('#para1').removeClass('highlight')
})
</script>
</body>
</html>
初始的效果：
点击 add highlight 后的效果图：
点击 remove highlight 后的效果图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）