js学习笔记82——操作内联样式

最新推荐文章于 2024-12-09 16:16:27 发布

原创最新推荐文章于 2024-12-09 16:16:27 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

小白学习js 专栏收录该内容

83 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript修改HTML元素的内联样式，包括改变元素的尺寸和背景颜色。示例代码展示了如何响应按钮点击事件动态更新元素的样式，并解释了内联样式的优先级问题。此外，还讲解了如何读取元素的内联样式，以及为何直接读取未设置的样式会返回空值。

js学习笔记82——操作内联样式

通过js修改元素的样式
查参考手册
内联样式
读取元素的样式

看如下代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
			
		#box1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		
	</style>
</head>
<body>
			
	<button id="btn01">点我一下</button>

	<br /><br />
	
	<div id="box1"></div>
</body>
</html>

在这里插入图片描述
如何通过点击按钮来改变box1的大小？

通过js修改元素的样式

语法：元素.style.样式名 = 样式值

	<script>
		window.onload = function(){
			var box1 = document.getElementById("box1");
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				box1.style.width = "200px";
			};
		};
	</script>

在这里插入图片描述
如果想修改背景颜色，可以这么写吗？

box1.style.background-color = "yellow";

会报措
在这里插入图片描述
那如何做呢？

用驼峰命名法

		window.onload = function(){
			var box1 = document.getElementById("box1");
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				box1.style.width = "200px";
				box1.style.height = "200px";
				box1.style.backgroundColor = "yellow";
			};
		};

在这里插入图片描述

查参考手册

参考手册

内联样式

在这里插入图片描述
可以看到，通过style属性设置的样式都是内联样式。
内联样式的好处是，设置的样式优先级比较高。
当然优先级最高的不是内联样式，如果我给背景颜色设置！important，则它的优先级最高。js将不起作用。所以尽量不要使用!important。

		#box1{
			width: 100px;
			height: 100px;
			background-color: red !important;
		}

读取元素的样式

语法：元素.style.样式名

			var btn02 = document.getElementById("btn02");
			btn02.onclick = function(){
				alert(box1.style.height);
			};

在这里插入图片描述
从上图可以看到，我直接点btn02读取到的是空，得先按btn01再按btn02才获取到样式。为什么？

通过style属性设置和读取的都是内联样式，所以如果我直接点击获取，由于高度并不在内联样式里，所以读不到。

js学习笔记82——操作内联样式

js学习笔记82——操作内联样式

通过js修改元素的样式

查参考手册

内联样式

读取元素的样式

2 条评论