首页 > 代码库 > Dom之标签属性
Dom之标签属性
一、标签默认属性的查找与修改
查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签操作</title>
</head>
<body>
<!--定义一个div标签和一个a标签-->
<!--div默认属性:id,class,style,可以通过"."的方式找到,自定义属性则不可以-->
<div id="container" class="c1" style="font-size: 12px;color: red" sb="‘xx">
<div>武功秘籍</div>
<div>家常菜谱</div>
</div>
<a href="http://www.baidu.com">添加</a>
<script type="text/javascript">
var obj = document.getElementById(‘container‘);
console.log(obj.id);
// class属性对应className值,font-size属性对应fontSize值
console.log(obj.className);
console.log(obj.style.fontSize);
console.log(obj.sb);
</script>
</body>
</html>
结果:
container
c1
12px
undefined
修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签操作</title> </head> <body> <!--定义一个div标签和一个a标签--> <!--div默认属性:id,class,style,可以通过"."的方式找到,自定义属性则不可以--> <div id="container" class="c1" style="font-size: 12px;color: red" sb="‘xx"> <div>武功秘籍</div> <div>家常菜谱</div> </div> <a href="http://www.baidu.com">添加</a> <script type="text/javascript"> var obj = document.getElementById(‘container‘); // 对已列出的默认属性可以修改其值,没有列出的默认属性或自定义属性只能通过setAttribute设置 obj.id=‘con‘; obj.className = ‘cla_c1‘; obj.style.fontSize=‘20px‘; </script> </body> </html>
二、标签属性管理的万能神器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签操作</title> </head> <body> <!--定义一个div标签和一个a标签--> <!--div默认属性:id,class,style,可以通过"."的方式找到,自定义属性则不可以--> <div id=‘container‘ style="font-size: 12px;color: red" sb="‘xx"> <div>武功秘籍</div> <div>家常菜谱</div> </div> <a href="http://www.baidu.com">添加</a> <script type="text/javascript"> var obj = document.getElementById(‘container‘); // 对于标签默认属性或自定义属性均可设置,且名称定义可见即可得 obj.setAttribute(‘class‘,‘container‘); obj.setAttribute(‘kong‘,‘kongzhagen‘); </script> </body> </html>
效果图
Dom之标签属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。