10.jquery操作行內樣式和class屬性
阿新 • • 發佈：2022-04-17
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.test1{
background-color: #54f5ff;
color: fuchsia;
font-family: 宋體;
text-align: center;
}
.test2{
width: 50vw;
height: 20vh;
line-height: 10vh;
border-radius: 100%;
}
</style>
</head>
<body>
<div id="no1">我是測試文件</div>
<hr>
<div>
<input type="button" value="新增class1">
<input type="button" value="新增class2">
<input type="button" value="刪除class1">
<input type="button" value="刪除class2">
<input type="button" value="是否有class1">
<input type="button" value="顯示所有class">
<input type="button" value="清除所有class">
</div>
<hr>
<div id="show"></div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(":button:eq(0)").on("click",function () {
$("#no1").addClass("test1");
})
$(":button:eq(1)").on("click",function () {
$("#no1").addClass("test2");
})
$(":button:eq(2)").on("click",function () {
$("#no1").removeClass("test1");
})
$(":button:eq(3)").on("click",function () {
$("#no1").removeClass("test2");
})
$(":button:eq(4)").on("click",function () {
var $ifHas = $("#no1").hasClass("test1") ? "有test1":"沒有test1";
$("#show").html($ifHas);
})
$(":button:eq(5)").on("click",function () {
$("#show").html($("#no1")[0].className);
})
$(":button:eq(6)").on("click",function () {
$("#show").html($("#no1")[0].className="");
})
</script>