操作元素樣式有兩種方式，一種是操作style屬性，一種是操作className屬性，下面我們分別進行講解。
1. 操作style屬性
除了前面講解的元素內容和屬性外，對于元素對象的樣式，可以直接通過“元素對象.style.樣式屬性名”的方式操作。樣式屬性名對應CSS樣式名，但需要去掉CSS樣式名里的半字線“-”，并將半字線后面的英文的首字母大寫。例如，設置字體大小的樣式名font-size，對應的樣式屬性名為fontSize。
為了便于讀者的學習使用，下面我們通過表1列出常用style屬性中CSS樣式名稱的書寫及說明。
表1 常見的style屬性操作的樣式名
| 名稱 | 說明 |
| background | 設置或返回元素的背景屬性 |
| backgroundColor | 設置或返回元素的背景色 |
| display | 設置或返回元素的顯示類型 |
| fontSize | 設置或返回元素的字體大小 |
| height | 設置或返回元素的高度 |
| left | 設置或返回定位元素的左部位置 |
| listStyleType | 設置或返回列表項標記的類型 |
| overflow | 設置或返回如何處理呈現在元素框外面的內容 |
| textAlign | 設置或返回文本的水平對齊方式 |
| textDecoration | 設置或返回文本的修飾 |
| textIndent | 設置或返回文本第一行的縮進 |
| transform | 向元素應用2D或3D轉換 |
接下來，通過代碼演示如何對元素的樣式進行添加，具體示例如下。
<div id="box"></div>
<script>
var ele = document.querySelector('#box'); // 獲取元素對象
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.transform = 'rotate(7deg)';
</script>上述第4~6行代碼用于為獲取的ele元素對象添加樣式，其效果相當于在CSS中添加以下樣式。
#box {width: 100px; height: 100px; transform: rotate(7deg);}
2. 操作className屬性
在開發中，如果樣式修改較多，可以采取操作類名的方式更改元素樣式，語法為“元素對象.className”。訪問className屬性的值表示獲取元素的類名，為className屬性賦值表示更改元素類名。如果元素有多個類名，在className中以空格分隔。
接下來，通過代碼演示如何使用className更改元素的樣式。
（1）編寫html結構代碼，具體示例如下。
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="first">文本</div>
</body>上述代碼中，第9行給div元素添加first類，并在style中設置了first的樣式，瀏覽器預覽效果如圖1所示。
圖1 初始效果
（2）單擊div元素更改元素的樣式，示例代碼如下。
<script>
var test = document.querySelector('div');
test.onclick = function () {
this.className = 'change';
};
</script>上述代碼中，第2行獲取div元素存儲在test對象中。第3~5行為text對象添加onclick單擊事件，第4行執行事件處理程序使用this.className給test對象設置change類名，其中this指的是test對象。
（3）在style中添加change類，樣式代碼如下。
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}（4）單擊div盒子，瀏覽器預覽效果如圖2所示。
圖2 單擊后效果
執行上述代碼之后，會直接把原先的類名first修改為change，如果想要保留原先的類名，可以采取多類名選擇器的方式，修改第（2）步的第4行代碼，示例代碼如下。
this.className = 'first change';修改之后，在控制臺查看到div元素的類已經修改成了<div class=”first change”>文本</div>，保留了之前的類名。
相關推薦
飛利浦276e顯示器評測（飛利浦276e8VJSB怎么樣）
一、前言 4K液晶顯示器發展至今已經過去了好幾個年頭了，隨著制造工藝的成熟和成本的降低，4K顯示器的售價也是變得越來越親民，市場上涌現了許多入門級的4K顯示器，不過，雖說是入門，但…
js壓縮工具哪些好（推薦這15款壓縮工具）
JavaScript 代碼壓縮是指去除源代碼里的所有不必要的字符，而不改變其功能的過程。這些不必要的字符通常包括空格字符，換行字符，注釋以及塊分隔符等用來增加可讀性的代碼，但并不需…
js壓縮工具哪個好（實測好用且簡單的9款工具）
削減是一個從源代碼中刪除不必要的字符的技術使它看起來簡單而整潔。這種技術也被稱為代碼壓縮和最小化。在這里，我們為你收集了9個最好的JavaScript壓縮工具將幫助您刪除不必要的空…
js日期加一天的公式（js獲取下一天的日期的方法）
想自己寫一個日期的加減方法，但是涉及到每個月天數的判斷，如果是2月份的話，還要涉及到閏年的判斷，有些復雜，應用過程中總是出現問題，于是查了下資料，以在某個日期上加減天數來說，其實只…
jsp和servlet區別在哪（簡述2者間的不同處）
JSP全名為Java Server Pages，中文名叫java服務器頁面，其根本是一個簡化的Servlet設計，它是由SunMicrosystems公司倡導、許多公司參與一起建立…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。