<!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>
1、jQuery设置css样式
<div style="background-color:#ffffffpadding-left:10px">测试jQuery动态获取padding-left</div>
2、用css()方法返回元素的样式属性
$("div").css("padding-left"))
3、用css()设置样式
$("div").css("color","yellow")
4、设置多个样式
$("div").css({"background-color":"yellow","font-size":"200%"})
var css = {
background-color: '#EEE',
height: '500px',
margin: '10px',
padding: '2px 5px' }
$("div").css(css)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)