操作元素修改样式属性

最新推荐文章于 2024-01-18 08:32:12 发布

hcoke

最新推荐文章于 2024-01-18 08:32:12 发布

阅读量162

点赞数

分类专栏：学习笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_62962469/article/details/123355100

版权

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

我们可以通过js修改元素的大小，颜色，位置等样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			div.onclick = function() {
				//div.style.backgroundColor = 'purple'; 这里注意驼峰命名法 C要大写 fontSize 中S大写
				this.style.backgroundColor = 'purple';
			}
		</script>
	</body>
</html>

实现点击div所在的粉色区域后，区域变色为紫色。

这里注意的点：1.这里注意驼峰命名法backgroundColor C要大写 fontSize 中S大写

2.js修改style样式操作，产生的是行内样式，权重比较高。

仿淘宝关闭二维码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				position: relative;
				width: 60px;
				height: 72px;
				margin: 200px auto;
				font-size: 12px;
				text-align: center;
				color: black;
			}
			.box img {
				width: 60px;
				margin-top: 5px;
			}
			.close-btn {
				position: absolute;
				top: -1px;
				left: -16px;
				width: 14px;
				height: 14px;
				border: 1px solid #ccc;
				line-height: 14px;
				font-family: arial, helvetica, sans-serif;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			淘宝二维码
			<img src="images/r_code.jpg" >
			<i class="close-btn">×</i>
		</div>
		<script>
			var btn = document.querySelector('.close-btn');
			var  box = document.querySelector('.box');
			btn.onclick = function() {
				box.style.display = 'none';
			}
		</script>
	</body>
</html>

点击x后，隐藏二维码。这里的二维码并没有消失，刷新后会再次出现。

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
操作元素修改样式属性

我们可以通过js修改元素的大小，颜色，位置等样式。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; } </
复制链接

扫一扫