JavaScript - 更改 CSS

使用 JavaScript 更改 CSS

JavaScript 允許您動態更改 HTML 元素的CSS。

當 HTML 在瀏覽器中載入時，它會建立一個DOM 樹。DOM 樹以物件格式包含每個 HTML 元素。此外，每個 HTML 元素物件都包含“style”物件作為屬性。在這裡，“style”物件包含各種屬性，例如 color、backgroundcolor 等，用於更改或獲取元素的樣式。

因此，您可以使用“style”物件的各種屬性來更改特定 HTML 元素的樣式。

語法

請按照以下語法更改 HTML 元素的 CSS。

element.style.property = value;

在上述語法中，“element”是您需要從 DOM 樹中訪問的 HTML 元素。“property”是 CSS 屬性，“value”可以是靜態的或動態的。

例如，您可以透過設定其 Style 物件上的相應屬性來更改元素的背景顏色或字型大小。這種方法的最佳用途是實現動態行為，例如動畫、過渡和使用者介面的即時更新。讓我們在實踐中看看這一點 -

HTML DOM Style 物件 - 技術教學

歡迎來到 Tutorialspoint

示例：更改 HTML 元素的樣式

我們在下面的程式碼中對 div 元素應用了初始樣式。在 JavaScript 中，我們使用 style 物件的“backgroundColor”屬性更改 div 元素的背景顏色。

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: blue;
      width: 700px;
      height: 100px;
      color: white;
    }
  </style>
</head>

<body>
  <div id = "square"> Changing the color of this Div. </div> <br>
  <button onclick="changeColor()"> Change Color </button>
  <script>
    function changeColor() {
      let square = document.getElementById('square');
      square.style.backgroundColor = 'red';
    }
  </script>
</body>
</html>

事件觸發時更改元素的樣式

您還可以在特定事件觸發時更改元素的樣式。

示例

在下面的程式碼中，我們向<div>元素添加了“click”事件。當用戶單擊按鈕時，它會更改 div 元素的背景顏色。

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 700px;
      height: 100px;
      color: white;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id = "square"> Click Me </div> <br>
  <script>
    const square = document.getElementById('square');
    square.addEventListener('click', () => {
      square.style.backgroundColor = 'green';
      square.style.fontSize = "25px";
    });
  </script>
</body>
</html>

動態更改 HTML 元素的 CSS

您還可以動態更改 HTML 元素的 CSS。您可以使用變數分配值。

示例

我們在下面的程式碼中向<div>元素添加了預設樣式。

此外，我們還建立了多個單選按鈕。當用戶選擇任何單選按鈕時，它會相應地更改 div 元素的樣式。

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    width: 700px;
    height: 100px;
    color: white;
    background-color: blue;
  }
</style>
</head>
<body>
<div><p id = "square">Select any of the following colors to change the background color</p></div>
<div>Yellow: <input type = "radio" id = "yellow" name = "color"></div>
<div>Green: <input type = "radio" id = "green" name = "color"></div>
<div>Red: <input type = "radio" id = "red" name = "color"></div>
<script>
  let square = document.getElementById('square');
  //    Changing the style when radio button changes
  let colors = document.getElementsByName('color');
  for (let i = 0; i < colors.length; i++) {
    colors[i].addEventListener('change', function () {
      square.style.backgroundColor = this.id;
    });
 }
</script>
</body>
</html>

JavaScript DOM Style 物件屬性列表

以下是 JavaScript DOM Style 物件提供的屬性列表 -

序號	屬性和描述
1	alignContent 當它們沒有使用所有可用空間時，它會在交叉軸或垂直軸上對彈性容器的專案進行對齊。
2	alignItems 它設定彈性容器內專案的預設對齊方式。
3	alignSelf 它設定彈性容器內單個彈性專案的預設跨軸對齊方式。
4	animation 它定義所需的樣式。
5	animationDelay 它設定動畫開始後的延遲時間（以秒或毫秒為單位）。
6	animationDirection 它設定動畫的方向。
7	animationDuration 它指定動畫完成一個迴圈所需的時間。
8	animationFillMode 它指定動畫未播放、已結束或包含延遲時元素的樣式。
9	animationIterationCount 它設定或返回動畫應播放的次數。
10	animationName 它獲取或設定 @keyframes 動畫的動畫名稱。
11	animationTimingFunction 它指定動畫的速度曲線。
12	animationPlayState 它指定動畫是正在執行還是已暫停。
13	background 它設定或返回元素最多 8 個單獨的背景屬性。
14	backgroundAttachment 它設定或返回背景影像是否應與內容一起滾動或保持固定。
15	backgroundColor 它設定或返回元素的背景顏色。
16	backgroundImage 它設定或返回元素的背景影像。
17	backgroundPosition 它設定或返回元素的背景影像的位置。
18	backgroundRepeat 它設定或返回如何重複背景影像。
19	backgroundClip 設定或返回背景的繪畫區域。
20	backgroundOrigin 設定或返回背景影像相對於填充、邊框和內容的相對位置。
21	backgroundSize 設定或返回背景影像的大小。
22	backfaceVisibility 指定元素在不面向螢幕時是否可見。
23	border 設定或返回元素的邊框屬性。
24	borderBottom 設定或返回元素的下邊框屬性。
25	borderBottomColor 設定或返回元素下邊框的顏色。
26	borderBottomLeftRadius 設定或返回左下角邊框的半徑。
27	borderBottomRightRadius 設定或返回右下角邊框的半徑。
28	borderBottomStyle 設定或返回元素的下邊框樣式。
29	borderBottomWidth 設定或返回元素的下邊框寬度。
30	borderCollapse 指定表格單元格元素是否應該具有單獨的邊框，或者共享一個合併為單個邊框的邊框。
31	borderColor 設定或返回元素的邊框顏色。
32	borderImage 設定或返回元素的邊框影像。
33	borderImageOutset 指定邊框影像區域超出邊框框的擴充套件量。
34	borderImageRepeat 設定或返回影像邊框是否應圓角、重複或拉伸。
35	borderImageSlice 指定影像邊框的內偏移量。
36	borderImageSource 設定或返回用作元素邊框影像的影像源。
37	borderImageWidth 設定或返回影像邊框的寬度。
38	borderLeft 設定或返回元素的左邊框屬性。
39	borderLeftColor 設定或返回元素左邊框的顏色。
40	borderLeftStyle 設定或返回元素的左邊框樣式。
41	borderLeftWidth 設定或返回元素的左邊框寬度。
42	borderRadius 設定或返回四個不同的邊框半徑屬性。
43	borderRight 設定或返回元素的右邊框屬性。
44	borderRightColor 設定或返回元素右邊框的顏色。
45	borderRightStyle 設定或返回元素的右邊框樣式。
46	borderRightWidth 設定或返回元素的右邊框寬度。
47	borderSpacing 設定或返回表格中單元格之間的間距。
48	borderStyle 設定或返回元素的邊框樣式。
49	borderTop 設定或返回元素的上邊框屬性。
50	borderTopColor 設定或返回元素上邊框的顏色。
51	borderTopLeftRadius 設定或返回左上角邊框的半徑。
52	borderTopRightRadius 設定或返回右上角邊框的半徑。
53	borderTopStyle 設定或返回元素的上邊框樣式。
54	borderTopWidth 設定或返回元素的上邊框寬度。
55	borderWidth 設定或返回元素的邊框寬度。
56	bottom 設定或返回定位元素的底部位置。
57	boxShadow 設定或獲取元素框架周圍或內部的陰影。
58	boxSizing 指定元素的總寬度和高度的計算方式。
59	captionSide 設定或返回表格標題的位置。
60	caretColor 設定或獲取任何可編輯元素（在輸入或區域中）的游標顏色。
61	clear 設定或獲取特定元素相對於浮動物件的相對位置。
62	clip 設定或獲取定位元素的可見部分。
63	color 設定或獲取所選元素的文字顏色。
64	columnCount 指定元素應劃分為的列數。
65	columnFill 指定內容在被分成多列時如何在列中排列。
66	columnGap 指定列之間的間隙。
67	columnRule 設定或返回列規則屬性。
68	columnRuleColor 設定或獲取列之間的規則顏色。
69	columnRuleStyle 設定或獲取列之間的規則樣式。
70	columnRuleWidth 設定或獲取列之間的規則寬度。
71	columns 設定列寬和列數。
72	columnSpan 定義元素應跨越的列數。
73	columnWidth 設定或獲取列的寬度。
74	counterIncrement 定義在任何選擇器出現的每次出現時要增加的計數器數量。
75	counterReset 建立或重置計數器。
76	cursor 設定或獲取要為滑鼠指標顯示的游標型別。
77	direction 設定或獲取元素的文字方向。
78	display 設定或返回元素的顯示型別。
79	emptyCells 設定或獲取是否顯示空單元格的邊框和背景屬性。
80	filter 向影像新增濾鏡或視覺效果。
81	flex 設定或獲取是否顯示空單元格的邊框和背景屬性。
82	flexBasis 設定或返回彈性專案的初始長度。
83	flexDirection 設定或返回彈性元素的放置方向。
84	flexFlow 指定彈性專案的排列方向，flex-wrap指定是否應包裝彈性專案。
85	flexGrow 指定專案相對於同一容器內其他彈性專案的增長。
86	flexShrink 指定專案相對於同一容器內其他彈性專案的收縮程度。
87	flexWrap 指定是否應包裝彈性專案。
88	cssFloat 設定或返回元素的水平對齊方式。
89	font 設定或返回字型屬性。
90	fontFamily 設定或返回元素中文字的字體系列名稱和通用系列名稱列表。
91	fontSize 設定或返回文字的字型大小。
92	fontStyle 設定或返回元素的字型樣式。
93	fontVariant 設定或返回小寫和大寫字母的文字。
94	fontWeight 設定或返回字型粗細屬性，該屬性指定單詞中字元的粗細。
95	fontSizeAdjust 設定或返回文字的字型縱橫比值。
96	height 設定或返回元素的高度。
97	isolation 指定元素是否必須建立一個新的堆疊內容。
98	justifyContent 設定或返回彈性專案在主軸上的對齊方式，或者當它們沒有使用所有可用空間時的水平對齊方式。
99	left 設定或返回定位元素的左側位置。
100	letterSpacing 設定或返回文字字元之間的間距。
101	lineHeight 設定或返回文字中行之間的距離。
102	listStyle 設定或返回以下三個屬性。
103	listStylePosition 定位列表項標記。
104	listStyleImage 將影像設定為列表項標記。
105	listStyleType 設定或獲取列表項的標記型別。
106	margin 設定或返回元素的邊距。
107	marginBottom 設定或返回元素的下邊距。
108	marginLeft 設定或返回元素的左邊距。
109	marginRight 設定或返回元素的右邊距。
110	marginTop 設定或返回元素的上邊距。
111	maxHeight 設定或返回元素的最大高度。
112	maxWidth 設定或返回元素的最大寬度。
113	minHeight 設定或返回元素的最小高度。
114	minWidth 設定或返回元素的最小寬度。
115	objectFit 設定或返回如何調整影像或影片的大小以適應其容器。
116	objectPosition 定義影像或影片應在其內容框中如何定位。
117	opacity 設定或返回元素的不透明度級別或透明度級別，其中 0 表示完全透明，1 表示完全不透明。
118	order 設定或返回彈性專案相對於同一容器中彈性專案的順序。
119	orphans 設定或返回元素在頁面底部可見的最小行數。
120	outline 設定或返回以下三個輪廓屬性。
121	outlineColor 設定或返回元素周圍的輪廓顏色。
122	outlineOffset 設定或返回輪廓偏移量，並在邊框邊緣之外繪製它。
123	outlineStyle 設定或返回元素周圍的輪廓樣式。
124	outlineWidth 設定或返回元素的輪廓寬度。
125	overflow 決定如何處理不適合元素框的內容。
126	overflowX 如果內容不適合元素框，則決定如何處理內容的左右邊緣。
127	overflowY 如果內容不適合元素框，則決定如何處理內容的上下邊緣。
128	padding 設定或返回元素的填充。
129	paddingBottom 設定或返回元素的下填充。
130	paddingLeft 設定或返回元素的左填充。
131	paddingRight 設定或返回元素的右填充。
132	paddingTop 設定或返回元素的上填充。
133	pageBreakAfter 在列印或列印預覽期間設定或返回元素之後的分頁符行為。
134	pageBreakBefore 在列印或列印預覽期間設定或返回元素之前的分頁符行為。
135	pageBreakInside 在列印或列印預覽期間設定或返回元素內部的分頁符行為。
136	perspective 它指定元素與 z=0 平面的距離，以提供元素的 3D 檢視。
137	perspectiveOrigin 它使用 x 軸和 y 軸設定 3D 元素的位置。
138	position 它設定或返回任何元素上使用的定位方法型別。
139	quotes 它設定或返回嵌入引號的引號型別。
140	resize 它指定使用者是否可以調整元素的高度和寬度或不能。
141	right 它設定或返回已定位元素的右側位置，包括填充、捲軸、邊框和邊距。
142	scrollBehavior 當用戶點選可滾動框內的連結時，它指定平滑滾動效果而不是立即滾動。
143	tableLayout 它設定或返回 HTML 文件中表格單元格、行和列的佈局方式。
144	tabSize 它設定或返回製表符字元使用的空格長度。
145	textAlign 它設定或返回塊級元素內文字內容的水平對齊方式。
146	textAlignLast 它設定或返回文字最後一行的對齊方式。
147	textDecoration 它設定 textDecorationLine、textDecorationStyle 和 textDecorationColor 屬性。
148	textDecorationColor 它設定或返回文字裝飾（如上劃線、下劃線和刪除線）的顏色。
149	textDecorationLine 它指定裝飾將具有的線條型別。
150	textDecorationStyle 它設定或返回文字裝飾線的樣式，例如可以顯示為實線、虛線、點線或波浪線。
151	textIndent 它設定或返回文字第一行的縮排。
152	textOverflow 它指定文字超出包含元素時的行為。
153	textShadow 它設定或返回一個或多個文字陰影效果。
154	textTransform 它設定或返回文字的大小寫。
155	top 它設定或返回已定位元素的頂部位置，包括邊距、邊框、填充和捲軸。
156	transform 它應用 2D 或 3D 變換來變換物件。
157	transformOrigin 它允許使用者更改已變換元素的位置。
158	transformStyle 它指定子元素是在 3D 空間中定位還是相對於父元素平面展平。
159	transition 當懸停在任何塊級元素上時，它在更改其 CSS 屬性時新增類似動畫的效果。
160	transitionDelay 它設定或返回過渡效果開始之前的延遲時間（以秒或毫秒為單位）。
161	transitionDuration 它設定或返回過渡效果完成所需的時間量（以秒或毫秒為單位）。
162	transitionProperty 它指定將應用過渡效果的 CSS 屬性名稱。
163	transitionTimingFunction 它設定或返回過渡效果的速度曲線。
164	unicodeBidi 它指定如何顯示文件中的雙向文字。
165	userSelect 它設定或返回使用者是否可以選擇文字。
166	verticalAlign 它設定或返回元素中內容的垂直對齊方式。
167	visibility 它設定或返回元素是否應可見。
168	whiteSpace 它設定或返回文字中如何處理空白字元的方式。
169	width 它設定或返回元素的寬度。
170	window 它設定或返回元素在頁面頂部可見的最小行數。
171	wordBreak 它指定單詞在到達行尾時如何換行，除了 CJK（中文、日語和韓語）指令碼。
172	wordSpacing 它設定或返回句子中單詞之間的間距。
173	wordWrap 它設定或返回長單詞是否應換行到下一行。
174	zIndex 它設定已定位元素的 z 順序。

列印頁面