js--通过DOM方法操作属性

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

正在奋斗的程序猿

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

阅读量202

点赞数 2

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

本文链接：https://blog.csdn.net/m0_74293254/article/details/131273606

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

这篇文章展示了如何使用JavaScript的DOM方法来操作HTML元素的属性。包括使用getAttribute获取属性值，如li的title，a标签的href，以及img的src；使用setAttribute设置属性值，如修改li的title，a标签的href，以及img的src；以及使用removeAttribute移除属性，如移除h4的style，a标签的href，和img的src。

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

1、使用对象的DOM方法获取属性数据。查看属性，使用节点对象的getAttribute()方法。

格式如：var l=节点对象.getAttribute("title")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h4 id="h" style="color: red;">班级列表</h4>
		<ul>
			<li title="2班">2班</li>
			<li class="a">4班</li>
			<li>
				<a class="b" href="http://baidu.com">5班</a>
			</li>
			<li class="a">
				<img width="200px" src="./img/1.webp"/>
			</li>
		</ul>
		<hr/>
		<p>
			<button onclick="func1()">获取属性的值</button>
		</p>
		
		<script>
			function func1(){
				//1 找第一个li元素的title属性
				let li =document.querySelector("li")
				let a = li.title;
				alert(a);
				
				//2 找到样式为b的超链接的网址
				let link =document.querySelector(".b")
				let b = link.href;
				alert(b);
				
				//3 找到图片的地址路径
				let img =document.querySelector("img")
				let address = img.src
				alert(address);
			}
		</script>
	</body>
</html>

2、设置属性setAttribute()方法

格式如：节点对象.setAttribute("title", "2018年喜恶");

document.getElementById("lnk").setAttribute("href", "https://blog.csdn.net/");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h4 id="h" style="color: red;">班级列表</h4>
		<ul>
			<li title="2班">2班</li>
			<li class="a">4班</li>
			<li>
				<a class="b" href="http://baidu.com">5班</a>
			</li>
			<li class="a">
				<img width="200px" src="./img/1.webp"/>
			</li>
		</ul>
		<hr/>
		<p>
			<button onclick="func2()">设置属性的值</button>
		</p>
		
		<script>
			function func2(){
				//1 设置第一个li元素的title属性为 2班最牛
				let li =document.querySelector("li")
				li.title="2班最牛";
				
				//2 修改样式为b的超链接的网址为 https://blog.csdn.net
				let link =document.querySelector(".b")
				link.href="https://blog.csdn.net"
				
				//3 设置到图片的地址路径为2.webp
				let img =document.querySelector("img")
				img.src="./img/2.webp";
			}
			
		</script>
	</body>
</html>

3、移除属性removeAttribute()方法

格式如：节点.removeAttribute("title");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h4 id="h" style="color: red;">班级列表</h4>
		<ul>
			<li title="2班">2班</li>
			<li class="a">4班</li>
			<li>
				<a class="b" href="http://baidu.com">5班</a>
			</li>
			<li class="a">
				<img width="200px" src="./img/1.webp"/>
			</li>
		</ul>
		<hr/>
		<p>
			<button onclick="func3()">移除属性的值</button>
		</p>
		<script>
			function func3() {
				//获取要操作的元素
				var style_= document.getElementById("h");
				//移除style属性
				style_.removeAttribute("style");
				
			   //获取要操作的元素
				  var href_= document.querySelector("a.b");
			   //移除href属性
				  href_.removeAttribute("href");
				  
			   //获取要操作的元素
				let img_=document.querySelector("img")
			   //移除src属性
				img_.removeAttribute("src");
			}
		</script>
	</body>
</html>

练习

1、使用DOM方法方式来设置h3标签中的title属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- //1、使用DOM方法方式来设置h3标签中的title属性
		//   要求能够获取title和设置title -->
		<h3 title="2班">老李</h3>
		<button onclick="func()">设置属性的值</button>
		<script>
			function func(){
				let ljt =document.querySelector("h3");
			    ljt.title="2班最牛";
			}
			
		</script>
	</body>
</html>

2、将h3标签中的文字加粗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2、将h3标签中的文字加粗 -->
		<h3>老李</h3>
		<button onclick="func()">设置属性的值</button>
		<script>
			function func(){
				let l =document.querySelector("h3");
				l.style.fontWeight = '400';
				}
		</script>
	</body>
</html>

3、将a标签的链接修改为百度的网址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://blog.csdn.net/">老李</a>
		<p>
		<button onclick="f1()">设置属性的值</button>
		</p>
		<script>
			function f1(){
				let link =document.querySelector("a")
				link.setAttribute("href","http://baidu.com");
			}
		</script>
	</body>
</html>

4、将样式为a的li标签，设置他的新样式为b

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				width: 100px;
				height: 50px;
				background-color: green;
				font-weight: 500;
			}
			.b{
				width: 100px;
				height: 100px;
				background-color: red;
				font-weight: 1000;
			}
		</style>
	</head>
	<body>
		<!-- 4、将样式为a的li标签，设置他的新样式为b -->
		<li class="a">老李</li>
		<p>
			<button onclick="f3()">设置属性的值</button>
		</p>
		<script>
			function f3(){
				let l= document.querySelector("li");
				l.className="b";
			}
		</script>
	</body>
</html>