1. element.style 行內樣式操作
代碼示例 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> // 1. 獲取元素 var div = document.querySelector('div'); // 2. 注冊事件 處理程序 div.onclick = function() { // div.style里面的屬性 采取駝峰命名法 this.style.backgroundColor = 'purple'; this.style.width = '250px'; } </script> </body> </html>
2. element.className 類名樣式操作
代碼示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 獲得修改元素樣式 如果樣式比較少 或者 功能簡單的情況下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 讓我們當前元素的類名改為了 change
// 2. 我們可以通過 修改元素的className更改元素的樣式 適合於樣式較多或者功能復雜的情況
// 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
</html>