zoukankan      html  css  js  c++  java
  • 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>
    

      效果图

  • 相关阅读:
    Calling Convention的总结
    形参传递关键点
    linux input输入子系统分析《四》:input子系统整体流程全面分析
    22.Linux-块设备驱动之框架详细分析(详解)
    spring: 使用profiles选择数据源(结合嵌入式数据源EmbeddedDatabaseBuilder)
    spring: 使用嵌入式数据源 EmbeddedDatabaseBuilder
    jsp:jstl标签之控制流程
    jsp: jstl标签库
    jsp:tld标签
    spring boot: 组合注解与元注解
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6160827.html
Copyright © 2011-2022 走看看