js学习之操作元素样式

最新推荐文章于 2023-03-23 16:57:51 发布

playboy-jordan

最新推荐文章于 2023-03-23 16:57:51 发布

阅读量165

点赞数

分类专栏： # JavaScript教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106961935

版权

JavaScript教程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>js操作元素的样式</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: aqua;
			}
		</style>
		<!--
			js操作元素样式：
				获取元素对象
					通过style属性
						元素对象名.style.样式名="样式值"//添加或者修改
						元素对象名.style.样式名=""//删除样式
						注意:
							以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
					通过className
						元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
						元素对象名.className=""//删除类样式。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//js操作元素样式
				//js给元素操作样式---style
					function testOperCss(){
						//获取元素对象
							var showdiv=document.getElementById("showdiv");
						//添加元素样式
							showdiv.style.backgroundColor="#FFA500";
						//js修改元素样式
							showdiv.style.border="solid 2px red";
						//js删除样式
							showdiv.style.border="";
					}
				//js操作样式--className				
					function testOperCss2(){
						//获取元素对象
							var div01=document.getElementById("div01");
						//获取
							alert(div01.className);
						//添加或者修改
							div01.className="common2";
						//删除
							div01.className="";
												
					}	
		</script>
	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" />
	<input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" />
		<hr />
		<div id="showdiv" style="border: solid 2px blue;">
			
		</div>
		<div id="div01" class="common">
			
		</div>
	</body>
</html>

在这里插入图片描述

playboy-jordan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js学习之操作元素样式

<html> <head> <title>js操作元素的样式</title> <meta charset="UTF-8"/>  <style type="text/css"> #showdiv{ width: 200px; height: 200px; border: solid 1px; } .common{ width:
复制链接

扫一扫