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

查找

<!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之标签属性的更多相关文章

  1. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  2. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  3. DOM标签属性和对象属性

    DOM元素的属性分为两种 (1)标签属性 直接写在标签上的属性 (2)对象属性 由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性 1.标签属性 (1)设置标签属 ...

  4. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  6. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  7. DOM相关方法，属性整理

    DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...

  8. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

  9. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

随机推荐

  1. MySQL数据库系统概述

    了解MySQL数据库管理系统,内容如下:   一.基于数据库的PHP项目       目前动态网站都是基于数据库,将网站内容使用数据库管理系统去管理       用户, 栏目, 图片, 文章, 评论都 ...

  2. Android沉浸式(侵入式)标题栏(状态栏)Status（一）

     Android沉浸式(侵入式)标题栏(状态栏)Status(一) 现在越来越多的APP设计采用这种称之为沉浸式状态栏(Status)的设计,这种沉浸式状态栏又称之"侵入式"状 ...

  3. Unity3D ShaderLab 布料着色器

    Unity3D ShaderLab布料着色器 布料着色器是我们在虚拟现实中经常使用的着色器.本篇就来完成一个较为简单的布料着色器. 新建Shader,Material,InteractiveCloth ...

  4. 云数据库 Bmob

    /**************************************************************************************** * 云数据库 Bmo ...

  5. 帝国cms教程：帝国cms在列表页使用sys_ResizeImg函数自动生成不同大小的缩略图

    先说说 ecms7.0的sys_ResizeImg这个函数 下面是在列表页使用方法 在右侧把使用程序代码打勾! 如下图: 例如你原先的列表页循环内容代码为: <li><img src ...

  6. 长方形—C++

    编程之美一道简单的热身题,活生生的组合数学例子啊. 题意如下: 在 N 条水平线与 M 条竖直线构成的网格中,放 K 枚石子,每个石子都只能放在网格的交叉点上.问在最优的摆放方式下,最多能找到多少四边 ...

  7. db2 存储过程 语法 及结果集查询

    第一次用存储过程,关于处理待办的,不知道怎么执行和传参数 给存储过程 ,其实就一句话很简单. @call PRC_MISSIONLIST_QUERY('27020214', '27040000', ' ...

  8. 去除包裹的a标签

    <div id="test">  <a href="http://www.cnblogs.com">Link 1</a>   ...

  9. MySQL二进制日志的备份和恢复

    二进制日志:记录数据库修改的相关操作,作用是即时点回复,主从复制 可以按时间滚动,也可以按大小滚动 server-id:服务器身份标识 一.二进制文件的删除方法,千万不要手动删除 PURGE BINA ...

  10. 《Java程序设计》第二次实验报告

    20145220 <Java程序设计>第二次实验报告 课程:Java程序设计 指导教师:娄嘉鹏 实验日期:2016.04.12 实验名称:Java面向对象程序设计 实验内容 初步掌握单元测 ...