在 javascript 中,可以通過以下方法設(shè)置 css 樣式:直接設(shè)置樣式屬性(element.style.propertyname = “value”)通過 classlist 設(shè)置樣式(classlist.add/remove(“class-name”))使用內(nèi)聯(lián)樣式(setattribute(“style”, “property1: value1; property2: value2;”))使用 cssstylesheet 操作 cssom(insertrule(“selector {
如何使用 JavaScript 設(shè)置 CSS 樣式
直接設(shè)置樣式屬性
element.style.propertyName = "value";
登錄后復(fù)制
例如:將元素的背景顏色設(shè)置為紅色:
element.style.backgroundColor = "red";
登錄后復(fù)制
通過 classList 設(shè)置樣式
element.classList.add("class-name"); element.classList.remove("class-name");
登錄后復(fù)制
通過添加或刪除 CSS 類,可以設(shè)置樣式。類定義在 CSS 文件中。
例如:將 “my-class” 類應(yīng)用于元素:
element.classList.add("my-class");
登錄后復(fù)制
使用內(nèi)聯(lián)樣式
element.setAttribute("style", "property1: value1; property2: value2;");
登錄后復(fù)制
直接在 HTML 元素中設(shè)置內(nèi)聯(lián)樣式。這通常不推薦使用,因為它會使代碼難以維護(hù)。
例如:設(shè)置元素的字體大小為 16px:
element.setAttribute("style", "font-size: 16px");
登錄后復(fù)制
使用 CSSStyleSheet
const styleSheet = document.styleSheets[0]; styleSheet.insertRule("selector { property: value; }");
登錄后復(fù)制
直接操作 CSSOM(文檔對象模型)來設(shè)置樣式。這通常僅用于高級定制。
例如:創(chuàng)建一個新規(guī)則,將元素的文本顏色設(shè)置為藍(lán)色:
styleSheet.insertRule("element { color: blue; }");
登錄后復(fù)制