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方法即可,代码如下<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<style type="text/css">
.className2 {
color: red
}
</style>
</head>
<body>
<div class='className'>我是className,准备添加className2</div>
<button id="addStyle">添加className2样式</button>
<button id="rmStyle">删除className2样式</button>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#addStyle").click(function(){
$(".className").addClass("className2")
})
$("#rmStyle").click(function(){
$(".className").removeClass("className2")
})
})
</script>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)