在script中使用CSS是一種非常便捷的方式,因為它允許您在JavaScript中直接編輯樣式,而無需在HTML文檔中引用樣式文件。在使用此方法之前,我們必須確保已為我們的文檔中的元素定義了ID或類名。
我們可以通過JavaScript中的“document.style”語法來訪問元素,并添加/編輯樣式屬性。以下是一個例子:
var myElement = document.getElementById("myElement");
myElement.style.backgroundColor = "red";
myElement.style.color = "white";
在此示例中,我們選擇了ID為“myElement”的元素,并將其背景顏色更改為紅色,將文本顏色更改為白色。
最好的做法是將CSS樣式定義存儲在一個變量中,以便在需要更改樣式時可以輕松編輯。下面是一個例子:var myStyle = {
backgroundColor: "red",
color: "white"
};
var myElement = document.getElementById("myElement");
for (var property in myStyle) {
myElement.style[property] = myStyle[property];
}
在這個例子中,我們定義了一個包含需要更改的所有樣式屬性的對象。然后,我們循環遍歷了這個對象,并使用屬性名稱將對象中的每個屬性應用于元素。
在使用CSS時,對于需要更改文本樣式的元素,有一些特殊屬性必須注意。例如,“text-transform”是一個非常有用的屬性,它允許我們以大寫或小寫字母來呈現文本。以下是一個例子:var myElement = document.getElementById("myElement");
myElement.style.textTransform = "uppercase";
在這個例子中,我們將ID為“myElement”的元素的文本轉換為大寫字母。
總的來說,在script中使用CSS是一種非常方便的方式來編輯和更改樣式,我們應該在需要時盡量使用它。下一篇scss 和css區別