設置內聯樣式與獲取類似，都是通過 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> ```