jQuery类和样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">divdivdiividiviiddv</div>
<input type="button" id="add_class" value="添加class" />
<input type="button" id="del_class" value="删除class" />
<input type="button" id="add_or_del_class" value="增或删class" />
<input type="button" id="add_or_del_class_switch" value="增或删class开关" />
<input type="button" id="add_style" value="添加样式" />
<input type="button" id="del_style" value="删除样式" />
</body>
<script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
document.getElementById("add_class").onclick=function(){
/* jQuery提供了专门修改class属性的方法 */
$("#d1").addClass("div1");
}
document.getElementById("del_class").onclick=function(){
/* jQuery提供了专门删除class属性的方法 */
$("#d1").removeClass("div1");
}
document.getElementById("add_style").onclick=function(){
/* jQuery提供了专门修改样式的方法 */
$("#d1").css("width","100px");
$("#d1").css("height","100px");
$("#d1").css("border","solid 1px red");
/* jQuery获取某属性的值 */
var width = $("#d1").css("width");
alert("d1的width为："+width);
}
document.getElementById("del_style").onclick=function(){
/* jQuery提供了专门删除样式的方法 */
$("#d1").css("width","");
$("#d1").css("height","");
$("#d1").css("border","");
}
document.getElementById("add_or_del_class").onclick=function(){
/* toggleClass:若该类不存在则添加，若该类存在则删除 */
$("#d1").toggleClass("aaa");
}
document.getElementById("add_or_del_class_switch").onclick=function(){
/* toggleClass:若该类不存在则添加，若该类存在则删除 */
/* 第二个参数true:增加类，false：删除 */
$("#d1").toggleClass("aaa",false);
}
</script>
</html> 相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17