js怎麼修改css類
- 青灯夜游原創
- 2021-07-01 17:23:023386瀏覽
js修改css類別的方法：1、使用className屬性，語法「元素物件.className="css類別名稱」；2、使用setAttribute()方法，語法「元素物件.setAttribute("class ", "css類別名稱")”。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
方法1：使用className屬性
className 屬性設定或傳回元素的 class 屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.mystyle{
background-color: palegoldenrod;
}
.otherstyle{
background-color: palevioletred;
}
</style>
</head>
<body id="myid" class="mystyle">
<input type="button" value="更改类名" onclick="changeClass()"/><br /><br />
<div id="div">Body CSS class名为：mystyle</div>
<script>
function changeClass(){
var x=document.getElementById('myid');
x.className="otherstyle";
document.getElementById('div').innerHTML="Body CSS class名为："+ x.className;
}
</script>
</body>
</html>效果圖：
#方法2：使用setAttribute() 方法
setAttribute( ) 方法新增指定的屬性，並為其賦指定的值。
如果這個指定的屬性已存在，則只設定/更改值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.mystyle{
background-color: palegoldenrod;
}
.otherstyle{
background-color: palevioletred;
}
</style>
</head>
<body id="myid" class="mystyle">
<input type="button" value="更改类名" onclick="changeClass()"/><br /><br />
<div id="div">Body CSS class名为：mystyle</div>
<script>
function changeClass(){
var x=document.getElementById('myid');
x.setAttribute("class", "otherstyle");
document.getElementById('div').innerHTML="Body CSS class名为："+ x.className;
}
</script>
</body>
</html>效果圖：
【相關推薦：javascript學習教學】
#以上是js怎麼修改css類的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn