前端笔记46——设置html元素样式

最新推荐文章于 2024-02-10 05:15:00 发布

野生杂学家阿博

最新推荐文章于 2024-02-10 05:15:00 发布

阅读量361

点赞数

分类专栏：前端文章标签：前端 JavaScript 设置html元素的样式

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/85543098

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在前面的《前端笔记44——获取或者修改div内容》和《前端笔记45——JavaScript获取和设置input的值》中，我们说的都是改变内容了，这篇博客我们来说一下设置html元素的样式。

设置html元素的样式

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="background-color: red; height: 100px;width: 100px;"></div>
		<button id="btn">点击换背景颜色</button>
		<script type="text/javascript">
			// 需求：点击换div背景颜色
			// 1找到btn 找到box 2点击事件 3改变颜色
			var oBtn = document.getElementById("btn")
			var oBox = document.getElementById("box")
			oBtn.onclick = function(){
				// 改变背景颜色 符号‘.’可以理解为汉语‘的’
				// 在CSS样式 background-color 在js中需要去掉中间的 - 把后面单词的首字母大写
				oBox.style.backgroundColor = "orange"
			}
		</script>
	</body>
</html>

上面代码中，我们通过标签id.style.属性的名称设置值就是，改变html元素的样式。