[JavaScript]Dom_attribute相关方法

最新推荐文章于 2023-10-29 21:04:07 发布

初露微微

最新推荐文章于 2023-10-29 21:04:07 发布

阅读量248

点赞数

分类专栏： Javascript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/wy1948/article/details/119900298

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

晚安

1、两种方法定义

set/getAttiribute()
removeAttribute()
[注] 以上方法都是操作元素节点中某个属性的。

2、两种方法用法和比较

// 用以前的方式获取元素

		window.onload=function(){
			var ox=document.getElementById("div1");
			// 用以前的方式获取元素
			 alert(ox.title); 输出"you"
			 alert(ox.className);输出"hello"

	// 用以前的方式修改元素

			// 用以前的方式修改元素
			ox.title="me";title修改为“me”
			 ox.className="hi";className修改为"hi"

// 用attribute相关方法获取

			alert(ox.getAttribute("title"));获取到"you"
			ox.setAttribute("title","me");修改title属性为“me”

输出结果↓ 在这里插入图片描述
相互比较
[1] class属性范围区别，点操作是通过classname，而set/getAttiribute()是通过class
[2]set/getAttiribute()支持设置用户自定义属性
[3]拥有removeAttribute方法

			 上述两种方法的区别 
			 [1] class属性范围区别，点操作是通过classname，而set/getAttiribute()是通过class
			  alert(ox.className);
			  alert(ox.getAttribute("class"));
			  alert(ox.setAttribute("class","hi"));
			 [2]set/getAttiribute()支持设置用户自定义属性
			 // 设置用户自定义属性
			  ox.xxx="yyy";无法定义
			  ox.setAttribute("xxx","yyy");自定义属性成功
			 [3]拥有removeAttribute方法		
			 ox.removeAttribute("title");删除成功
		   // ox.title="";仍保留title属性

在这里插入图片描述

3、所有codes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom_attribute相关方法</title>
		<script type="text/javascript">
/* 		set/getAttiribute()
		removeAttribute()
		[注] 以上方法都是操作元素节点中某个属性的。 */
		
		window.onload=function(){
			var ox=document.getElementById("div1");
			// 用以前的方式获取元素
			// alert(ox.title); 输出"you"
			// alert(ox.className);输出"hello"
			// 用以前的方式修改元素
			// ox.title="me";title修改为“me”
			// ox.className="hi";className修改为"hi"
			
			// 用attribute相关方法获取
			// alert(ox.getAttribute("title"));获取到"you"
			// ox.setAttribute("title","me");修改title属性为“me”
			
			
			/* 上述两种方法的区别 
			 [1] class属性范围区别，点操作是通过classname，而set/getAttiribute()是通过class
			 // alert(ox.className);
			 // alert(ox.getAttribute("class"));
			 // alert(ox.setAttribute("class","hi"));
			 [2]set/getAttiribute()支持设置用户自定义属性
			 // 设置用户自定义属性
			 // ox.xxx="yyy";无法定义
			 // ox.setAttribute("xxx","yyy");自定义属性成功
			 [3]拥有removeAttribute方法		
			*/			

		   ox.removeAttribute("title");删除成功
		   // ox.title="";仍保留title属性				
		}
		</script>	
	</head>
	<body>
		<div id="div1"  title="you" class="hello" name="world" ></div>
	</body>
</html>

初露微微

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript]Dom_attribute相关方法

晚安1、两种方法定义set/getAttiribute()removeAttribute()[注] 以上方法都是操作元素节点中某个属性的。2、两种方法用法和比较// 用以前的方式获取元素 window.onload=function(){ var ox=document.getElementById("div1"); // 用以前的方式获取元素 alert(ox.title); 输出"you" alert(ox.className);输出"hello" .
复制链接

扫一扫

专栏目录