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 顺序。

打印页面