码迷,mamicode.com
首页 > 其他好文 > 详细

Dom之标签属性

时间:2016-12-11 22:52:52      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:charset   ges   har   操作   方式   head   ext   sha   type   

一、标签默认属性的查找与修改

查找

<!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之标签属性

标签:charset   ges   har   操作   方式   head   ext   sha   type   

原文地址:http://www.cnblogs.com/kongzhagen/p/6160827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!