JavaScript >> Javascript 文檔 >  >> Tags >> DOM

JavaScript 中 HTML DOM 樣式屬性介紹

style 屬性用於獲取和設置 inline 使用不同 CSS 屬性的 DOM 元素的樣式。它返回一個 CSSStyleDeclaration 對象,其中包含元素的 style 中定義的所有 CSS 屬性的列表 屬性。

style 屬性對動態非常有幫助 使用 JavaScript 更改 HTML 元素的視覺表示。您可以設置元素的幾乎所有樣式,例如顏色、字體、文本對齊方式、邊距、邊框、背景圖像、大小等。內聯樣式使用 style 直接應用於 HTML 元素 屬性對相鄰元素沒有任何影響。

語法

訪問 style 屬性,您可以使用 getElementById() 方法如下圖:

const elem = document.getElementById('sidebar');
 
// get CSS property
console.log(elem.style.display);

// set CSS property
elem.style.display = 'block';

查看本指南,了解在 JavaScript 中訪問 DOM 元素的不同方法。

示例

下面的例子演示瞭如何改變顏色字體 帶有 id="about" 的 HTML 元素的 CSS 屬性 使用 style 屬性:

const elem = document.getElementById('about');
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

上面的代碼會將 HTML 元素的文本顏色改為藍色,使其變為粗體,並將字體大小設置為 18px .

你可以 通過將字符串直接分配給 style 屬性來設置 CSS 屬性:

// set property directly (wrong)
elem.style = 'color: blue'; 

style 屬性是現成的 , 作為 style 屬性返回一個只讀的 CSSStyleDeclaration 目的。相反,您可以使用 style 屬性來設置或獲取單個 CSS 屬性。最好使用 style 屬性來為 HTML 元素設置特定樣式而不更改其他樣式值。

完全覆蓋 元素的現有內聯樣式,style 屬性提供 cssText 屬性:

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

或者,您可以使用元素的 setProperty() 指定style的方法 屬性值:

elem.setAttribute('style', 'color: blue; font-weight: bold; font-size: 18px');

查看本指南以了解使用 style 可訪問的所有 CSS 屬性 屬性。

命名約定

正如您在上面看到的,JavaScript 設置 CSS 屬性的方式與 CSS 略有不同。許多 CSS 屬性包含連字符 (- ) 在它們的名稱中,例如 font-weight , font-size , text-align 等。由於連字符是保留運算符,在 JavaScript 中被解釋為減號,因此不可能在表達式中使用連字符 .e.g. elem.style.font-size='12px' .

因此,在 JavaScript 中,CSS 屬性名稱是駝峰式的。連字符被刪除,每個連字符後的直接字母大寫。例如,CSS 屬性 font-size 成為 DOM 屬性 fontSize , background-color 變成 backgroundColor , border-left-color 變成 borderLeftColor ,等等。


Tutorial JavaScript 教程
  1. 如何在 Observable 上進行 1-of-n 切換數據流流

  2. 用Javascript從字典中讀取值

  3. JavaScript 常量函數 |示例代碼

  4. 前端持續集成監控工具

  5. 從頭開始創建 Netflix 克隆:JavaScript PHP + MySQL 第 6 天

  6. 構建靜態站點生成器 Grunt 插件

  7. 使用 webpack-report 分析和優化你的 webpack 構建

  1. 本地主機的 Vercel CLI 問題

  2. 如何在 JavaScript 中對數組進行分頁

  3. CRA 默認服務人員問題

  4. 使用 React Hooks 的傅里葉級數可視化

  5. TypeScript – 等待嵌套的 for 循環完成

  6. 選擇文本後如何彈出?

  7. 像專業人士一樣使用對象解構😎

  1. 使用 MakeWebVideo 製作動畫解說視頻

  2. 我的第一個 Github Action,使用 JavaScript。

  3. 用於 Gatsby 中無頭內容管理的 Sanity CMS

  4. 在 Apollo 客戶端 GraphQL 訂閱中使用 Websocket 的初學者指南