index.html:
<html>
<head>
<title>js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="content_id">显示的内容</div>
<button id="add_btn">添加class</button>
<button id="remove_btn">删除class</button>
<button id="toggle_btn">toggle切换class</button>
<button id="get_btn">获取css属性</button>
<button id="change_btn">更改css属性</button>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./index.js">
</script>
<style>
.testCla{
color:red;
}
</style>
</html>
index.js:
$(function(){
var dom = $("#content_id");
$("#add_btn").click(function(){
dom.addClass("testCla");
});
$("#remove_btn").click(function(){
dom.removeClass("testCla");
});
$("#toggle_btn").click(function(){
dom.toggleClass("testCla");
});
$("#get_btn").click(function(){
console.log(dom.css("backgroundColor"));
});
$("#change_btn").click(function(){
dom.css("backgroundColor","yellow")
});
});
注:
addClass:用来给元素添加一个class;
removeClass:用来给元素删除一个class;
toggleClass:用来动态的添加和删除class;
css:用来获取一个元素的属性;同样的也可以用来设置一个元素属性;
拓展:
css的方法设置属性时,需要使用驼形命名属性,驼形命名法:首字母小写,之后每个单词首字母大写;
,