JavaScript - 修改 CSS

使用 JavaScript 修改 CSS

JavaScript 允许您动态修改 HTML 元素的 CSS。

当 HTML 在浏览器中加载时，它会创建一个 DOM 树。DOM 树 以对象格式包含每个 HTML 元素。此外，每个 HTML 元素对象都包含一个"style"对象作为属性。这里，'style' 对象包含各种属性，例如颜色、背景颜色等，用于更改或获取元素的样式。

因此，您可以使用 'style' 对象的各种属性来更改特定 HTML 元素的样式。

语法

请按照以下语法更改 HTML 元素的 CSS。

element.style.property = value;

在上述语法中，"element"是一个 HTML 元素，您需要从 DOM 树中访问它。"property"是一个 CSS 属性，"value"可以是静态的，也可以是动态的。

例如，您可以通过在元素的 Style 对象上设置相应的属性来更改元素的背景颜色或字体大小。这种方法的最佳用途是实现动态行为，例如动画、过渡以及用户界面的实时更新。让我们来实际看看 -

示例:更改 HTML 元素的样式

在下面的代码中，我们将初始样式应用于 div 元素。在 JavaScript 中，我们使用样式对象的"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');
  // 当单选按钮改变时改变样式
  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 样式对象属性列表

以下是 JavaScript DOM 样式对象 提供的属性列表 -

Sr.No	属性 &说明
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 设置或返回元素的 border-bottom 属性。
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 设置或返回四种不同的 border-radius 属性。
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 设置或获取是否显示空单元格的 border 和 background 属性。
80	filter 它为图像添加滤镜或视觉效果。
81	flex 它设置或获取是否显示空单元格的 border 和 background 属性。
82	flexBasis 它设置或返回灵活单元格的初始长度
83	flexDirection 设置或返回 flex 元素的放置方向。
84	flexFlow 指定弹性项目的方向，flex-wrap 指定弹性项目是否应被包裹。
85	flexGrow 它指定了某个项目相对于同一容器内其他灵活项目的伸缩量。
86	flexShrink 它指定了该项目相对于同一容器内其他灵活项目的收缩量。
87	flexWrap 它指定了灵活项目是否应该被包裹。
88	cssFloat 设置或返回元素的水平对齐方式。
89	font 设置或返回字体属性。
90	fontFamily 设置或返回元素中文本的字体系列名称和通用系列名称列表。元素。
91	fontSize 设置或返回文本的字体大小。
92	fontStyle 设置或返回元素的字体样式。
93	fontVariant 设置或返回小写和大写字母的文本。
94	fontWeight 设置或返回 font-weight 属性，该属性指定单词中字符的粗细。
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 设置或返回以下三个 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 轴顺序。

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数

JavaScript 对象

面向对象的 JavaScript

JavaScript 版本

JavaScript 异步

JavaScript Cookies

JavaScript 浏览器 BOM

JavaScript Web APIs

JavaScript 事件

JavaScript 错误处理

JavaScript 重要关键字

JavaScript HTML DOM

JavaScript 高级章节

JavaScript 杂项

JavaScript 实用资源

JavaScript - 修改 CSS

使用 JavaScript 修改 CSS

语法

示例:更改 HTML 元素的样式

事件触发时更改元素样式

示例

动态更改 HTML 元素的 CSS

示例

JavaScript DOM 样式对象属性列表

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！