JavaScript >> Javascript 文檔 >  >> Tags >> CSS

如何使用 JavaScript 設置 CSS 樣式

在我之前的文章中,我們研究了使用 vanilla JavaScript 從 HTML 元素獲取樣式信息的不同方法。今天,您將學習如何使用 JavaScript 將 CSS 樣式應用於元素。

假設我們有以下 <div> 元素:

<div class="pizza">Hot, spicy, pizza 🍕</div>

現在我們要使用 JavaScript 更改其文本和背景顏色以及字體樣式 CSS 屬性。我們應該做什麼? JavaScript 中有多種可用的選項。

內聯樣式

使用 JavaScript 更改元素的 CSS 樣式最簡單直接的方法是使用 DOM 樣式屬性。

您需要做的就是從 DOM 中獲取元素並更改其內聯樣式:

const pizza = document.querySelector('.pizza');

// change text color to white
pizza.style.color = 'white';

// set background color to blue
pizza.style.backgroundColor = 'blue';

// change font style to italic
pizza.style.fontStyle = 'italic';

style 屬性使用 CSS 屬性的駝峰命名約定,並將樣式內聯應用於元素:

<div class="pizza" style="color: white; background-color: blue; font-style: italic;">Hot, spicy, pizza 🍕</div>

全局樣式

另一種方法是創建一個 <style> 元素,注入您的 CSS 屬性,並將其附加到 DOM。如果您想將樣式應用於多個元素而不是僅一個元素,則此選項特別有用。

首先,讓我們創建一個 <style> 元素:

const style = document.createElement('style');

接下來,使用 innerHTML 將 CSS 樣式添加到上述標籤 :

style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`;

最後,將樣式元素附加到 DOM。為此,請獲取 <head> 使用 document.head 標記 ,然後調用 appendChild() 添加樣式元素的方法:

document.head.appendChild(style);

以下是完整的 JavaScript 代碼片段:

// create an element
const style = document.createElement('style');

// add CSS styles
style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`;

// append to DOM
document.head.appendChild(style);

CSS 對像模型 (CSSOM) InsertRule()

根據 MDN:

CSSStyleSheet.insertRule() 方法將新的 CSS 規則插入樣式表。以下是如何使用此方法為上述 HTML 元素添加樣式:

// create an new style
const style = document.createElement('style');

// append to DOM
document.head.appendChild(style);


// insert CSS Rule
style.sheet.insertRule(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`);

不是 確實需要創建一個新的 <style> 元素。您可以使用現有的 <style> 元素以及外部樣式表使用 insertRule() 添加 CSS 規則 .

insertRule() 該方法適用於所有現代瀏覽器,包括 Internet Explorer 9 及更高版本。

可構造樣式表

在使用 Shadow DOM 時,可構造樣式表是一種創建和分發可重用樣式的現代方式。

下面是一個創建可構造樣式表並將其附加到 Shadow DOM 的示例:

// create a new shared stylesheet
const sheet = new CSSStyleSheet();

// add CSS styles
sheet.replaceSync(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`);

// apply stylesheet to a document
document.adoptedStyleSheets = [sheet];

結論

在本文中,我們研究了在 JavaScript 中將 CSS 樣式添加到 HTML 元素的四種不同方法。

那麼,您應該使用哪種方法呢?這取決於您想通過動態更改 CSS 來實現什麼。

如果您只想修改 single 的 CSS 樣式 元素,最好使用 style 屬性。此屬性僅更改特定元素的內聯樣式,而不影響全局樣式。

如果您想將樣式應用於 set HTML 元素,只需創建一個新的 <style> 使用必要的 CSS 屬性標記,並將其附加到文檔中。

閱讀下一篇: 如何使用 JavaScript 添加多種 CSS 樣式


Tutorial JavaScript 教程
  1. 構建 Angular + ASP.NET MVC 5

  2. 如何使用純 JavaScript 在 Table 中創建 TBody 標籤?

  3. 使用 JavaScript 捕獲焦點

  4. 用 JavaScript 理解 Big-O 表示法

  5. ReactJS 中的搜索組件問題

  6. 反應鉤子:useEffect

  7. Svelte - 通過小包學習這個快速框架的基礎知識

  1. 最小(是的,真的)TypeScript 設置

  2. 將您的 Node.js(或任何)應用程序部署到暗網!它是如此容易!

  3. 為什麼我喜歡在 React 中使用樣式化組件

  4. 使用任意字符集計數

  5. 軟 UI React Native - 免費產品

  6. NodeJS如何創建類似bash的輸入

  7. 在 React Native 中按下後退按鈕兩次時退出應用程序。

  1. 學習 JavaScript 的 7 個理由 + 5 個最佳免費 JavaScript 資源

  2. 重要的數學方法

  3. 生成藝術簡介

  4. React useState - 快速指南