設置內聯樣式與獲取類似,都是通過 style 屬性或 setAttribute() 方法實現。
## style 屬性方式
設置內聯樣式,依舊是通過 HTML 頁面元素的 style 屬性實現。
具體語法結構如下:
```javascript
element.style = style;
```
我們可以通過以下示例代碼,學習如何通過 style 屬性設置內聯樣式:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
pElem.style = 'color: lightblue;font-weight: lighter';
</script>
```
> **值得注意的是:** 這種方式定義 CSS 樣式,是字符串類型。并不適用于定義過多的 CSS 樣式屬性。
## setAttirbute() 方法方式
通過 style 屬性設置內聯樣式,我們還可以調用 element.setAttribute() 方法實現。
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
// 通過 element.setAttribute() 方法設置樣式
pElem.setAttribute('style','color: lightblue;font-weight: lighter');
// 通過 element.removeAttribute() 方法刪除樣式
pElem.removeAttribute('style');
</script>
```
> **值得注意的是:** 通過 setAttribute() 方法設置內聯樣式同樣是字符串類型。
## CSSStyleDeclaration 對象
通過 style 屬性獲取內聯樣式的學習,我們知道 style 屬性返回的是 CSSStyleDeclaration 對象。該對象封裝了 CSS 中的所有樣式屬性,所以我們也可以通過該對象設置內聯樣式。
CSSStyleDeclaration 對象提供的屬性和方法可以幫助我們設置 CSS 樣式的具體內容。
| 屬性或方法 | 描述 |
| --- | --- |
| setProperty() | 為指定的 CSS 樣式屬性設置一個新的值。|
| removeProperty() | 刪除指定的 CSS 樣式屬性。|
### setProperty() 方法
CSSStyleDeclaration 對象提供的 setProperty() 方法,用于設置指定的 CSS 樣式屬性。其語法結構如下:
```javascript
style.setProperty(propertyName, value, priority);
```
上述語法結構中,作為參數的 propertyName 表示要修改的 CSS 樣式屬性名稱。
value 是可選的,表示為修改的 CSS 樣式屬性新的值。如果沒有設置任何值,則表示空字符串。
參數 priority 也是可選的,表示設置 CSS 樣式的優先級別。
我們可以通過以下示例代碼,學習如何通過 setProperty() 方法設置 CSS 的樣式屬性:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var styleDeclar = pElem.style;
styleDeclar.setProperty('color','lightblue');
</script>
```
### removeProperty() 方法
CSSStyleDeclaration 對象提供的 removeProperty() 方法,用于刪除指定的 CSS 樣式屬性。其語法結構如下:
```javascript
var oldValue = style.removeProperty(property);
```
上述語法結構中,作為參數的 property 表示要刪除的 CSS 樣式屬性名稱,作為返回值的 oldValue 表示刪除的樣式屬性的值。
我們可以通過以下示例代碼,學習如何通過 removeProperty() 方法刪除 CSS 的樣式屬性:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var styleDeclar = pElem.style;
styleDeclar.removeProperty('font-weight');
</script>
```
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器