JavaScript文档对象模型document对象改变Html元素样式属性(5)

最新推荐文章于 2024-06-01 00:30:00 发布

积沙成塔——

最新推荐文章于 2024-06-01 00:30:00 发布

阅读量2k

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_45308912/article/details/121239319

版权

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript动态地改变HTML元素的样式。通过示例代码展示了两种方式：一种是直接修改行内样式，另一种是通过添加/切换类名来改变元素样式。这两种方法在不同的场景下各有优势，例如少量样式修改适合直接使用行内样式，大量样式修改则推荐使用类名操作。

摘要由CSDN通过智能技术生成

1. document对象改变Html元素样式属性

在这里插入图片描述

行内样式操作案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				height: 200px;
				width: 200px;
				background-color: darkgoldenrod;
			}
		</style>
	</head>
	<body>
	//当点击div这个盒子就换个背景颜色宽度也变宽
		<div></div>	
		<script>
			var obj = document.querySelector('div'); //获取元素对象
			//注册事件 事件处理函数
			obj.onclick = function() {
				this.style.backgroundColor = 'purple';  //修改Html元素样式属性
				this.style.width='300px';
			}
		</script>
	</body>
</html>

类名样式操作如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				height: 200px;
				width: 200px;
				background-color: darkgoldenrod;
			}
			.change {
				background-color: purple;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			//只有少许样式修改的时候就用js的行内样式操作修改
			//欧大量的样式修改就用js的类名样式操作修改
			var div = document.querySelector('div');
			div.onclick = function() {
				this.className = 'change';
			}
		</script>
	</body>
</html>

积沙成塔——

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript文档对象模型document对象改变Html元素样式属性(5)

1. document对象改变Html元素样式属性行内样式操作案例如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { height: 200px; width: 200px; background-color: darkgoldenrod; } &
复制链接

扫一扫

专栏目录