DOM中操作结点的属性_操作元素结点的样式

最新推荐文章于 2022-03-19 15:21:27 发布

有园人

最新推荐文章于 2022-03-19 15:21:27 发布

阅读量196

点赞数

分类专栏：网页编程和设计文章标签： DOM中操作结点的属性_操作元素结点的样式

本文链接：https://blog.csdn.net/qq_42031653/article/details/99656256

版权

网页编程和设计专栏收录该内容

33 篇文章 0 订阅

订阅专栏

有俩种方式操作结点的属性。

首先我们需要先获取所要操作的结点元素：

var uname=document.getElementById("uname");



var gan=uname.getAttribute("value");
var gat=uname.getAttribute("type");

俩种方法获取结点元素，根据获取的结点元素，在去操作元素的属性。

//操作属性的方式一
uname.type="button";


//操作元素的属性方式二
uname.setAttribute("value","狗蛋")

操作元素结点的样式:

还是一样：先获取元素，再去操作样式：

<script>
	var dv=document.getElementById("div1");
</script>

	function demo1(){	

		var h=dv.style.height;
		var w=dv.style.width;
		var bc=dv.style.backgroundColor;
		alert(bc+"__"+h+"__"+w);
				
		}
			
	function demo2(){

		dv.className="div2";
		dv.style.height="300px";
		dv.style.width="300px";
		dv.style.backgroundColor="red";
	    }

<style type="text/css">
			.div2{
				border: 5px solid cornflowerblue;
			}
		</style>

操作样式有俩种：一种是更改，还有一种是添加，添加我们就用到了className这个属性。

最后附上俩篇的完整源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04DOM中操作结点的属性</title>
		<script type="text/javascript">
			function show(){
				
				var uname=document.getElementById("uname");
				var va=uname.value;
				var ty=uname.type;
				var na=uname.name;
				//alert(va+"--"+ty+"--"+na);
				//操作属性的方式一
				uname.type="button";
				
				//获得元素属性(默认值)
				var gan=uname.getAttribute("value");
				var gat=uname.getAttribute("type");
				
				//操作元素的属性方式二
				uname.setAttribute("value","狗蛋")
				//alert(gan+"****"+gat);
			}
		</script>
	</head>
	<body>
		<p>
			<input type="text" id="uname" value="张三" name="uname" />
		</p>
		<p>
			<input type="button" id="" value="展示信息" onclick="show()" />
		</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05DOM中操作元素结点的样式</title>
		<script>
				
			function demo1(){	
				var h=dv.style.height;
				var w=dv.style.width;
				var bc=dv.style.backgroundColor;
				alert(bc+"__"+h+"__"+w);
				
			}
			
			function demo2(){
				dv.className="div2";
				dv.style.height="300px";
				dv.style.width="300px";
				dv.style.backgroundColor="red";
			}
		</script>
		
		<style type="text/css">
			.div2{
				border: 5px solid cornflowerblue;
			}
		</style>
	</head>
	<body>
	
		
		<div id="div1" style="background-color: aquamarine; width: 200px; height: 200px;"></div>
		<p>
			<input type="button" name="" id="" value="显示div的属性" onclick="demo1()"/>
		</p>
		<p>
			<input type="button" id="" value="改名div属性" onclick="demo2()"/>
		</p>
		<script>
			var dv=document.getElementById("div1");
				
		</script>
	</body>
</html>

有园人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中操作结点的属性_操作元素结点的样式

有俩种方式操作结点的属性。首先我们需要先获取所要操作的结点元素：var uname=document.getElementById("uname");var gan=uname.getAttribute("value");var gat=uname.getAttribute("type");俩种方法获取结点元素，根据获取的结点元素，在去操作元素的属性。//操作属性的方...
复制链接

扫一扫

专栏目录