javascript学习-DOM设置元素的样式

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

加油吧qaq

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

阅读量4.9k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107479420

版权

DOM设置元素的样式

1、通过style属性设置修改样式
【注！】此方式是直接设置标签的style属性，设置完后，优先级最高

      <div id="d1">
			helloworld
		</div>
		<script type="text/javascript">
			//1通过style属性设置修改样式
			var d1=document.querySelector('#d1')
			console.log([d1])
			d1.style.width="100px";
			d1.style.height="200px";
			d1.style.backgroundColor="skyblue"
			
		</script>

结果：
在这里插入图片描述
2、通过修改类名从而修改样式
【注！】在设置css属性时，如果css属性是由多个单词组成，比如background-color。在js中用驼峰命名的形式进行调用和设置：backgroundColor

  <head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
			width:200px;
			height: 200px;
			background-color: darkorchid;
			}
			.b{
				font-size: 40px;
				color: blue;
			}
			
		</style>
	</head>
	<body>
		<div id="d2">
			helloworld2
		</div>
		<script type="text/javascript">
	  //2通过修改类名从而修改样式
			var d2=document.querySelector("#d2");
		d2.className="a b"
		console.log([d2])
		</script>
	</body>

结果：
在这里插入图片描述
【注】修改类名还可以通过classlist属性的add(“类名”)/remove(“类名”)/replace(“原类名”,“现类名”)修改className

3、通过增加style标签来修改样式
此方式不常用

例子：

<div id="d1" class="donghua">
			hello
		</div>
		<script type="text/javascript">
			var style=document.createElement("style")
			//``反引号，可以包裹多行字符串
			style.innerHTML=`
			.donghua{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
				animation: donghua 3s alternate infinite;
			}
			@keyframes donghua{
				from{
					transform: translate(0,0);
				}
				to{
					transform: translate(400px,0);
				}
			}
			`
			var body=document.querySelector('body');
			body.appendChild(style)
			
		</script>

效果是来回动：
在这里插入图片描述

加油吧qaq

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-DOM设置元素的样式

DOM设置元素的样式1、通过style属性设置修改样式【注！】此方式是直接设置标签的style属性，设置完后，优先级最高 <div id="d1"> helloworld </div> <script type="text/javascript"> //1通过style属性设置修改样式 var d1=document.querySelector('#d1') console.log([d1]) d1.style.wid
复制链接

扫一扫