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

查找

<!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. HTML的窗口分帧

    下面通过一个后台管理的部分设计来说明窗口分帧 frameset.html代码 <!-- <frameset>标签(常用来做后台管理界面) 属性:rows(行).cols(列).可以使 ...

  2. Entityframework更新数据和插入数据

    public bool UpdateEmloyeeInfo(EmployeInfo employeInfo) { bool flg = false; try { using (UserManageDB ...

  3. Linux--/tmp目录文件重启后自动删除

    源博客 http://blog.itpub.net/24996904/viewspace-769327/ 在/etc/default/目录下有个rcS文件,文件内容如下:## /etc/default ...

  4. CSS 实现：元素相对于文档水平垂直居中

    [要求]:如何用 CSS 实现水平/垂直居中一个元素(相对于文档) <body> <div class="content"></div> < ...

  5. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  6. angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...

  7. python xlrd和xlwtxlutils包的使用

    安装xlrd读取模块 首先去官网或者pypi下载安装包,然后解压到任意目录 在dos下进入该目录,执行python setup.py install安装 验证成功进入python,执行import 包 ...

  8. UVa 12558 - Egyptian Fractions (HARD version)

    题目大意: 给出一个真分数,把它分解成最少的埃及分数的和.同时给出了k个数,不能作为分母出现,要求解的最小的分数的分母尽量大. 分析: 迭代加深搜索,求埃及分数的基础上,加上禁用限制就可以了.具体可以 ...

  9. break、continue与return见的区别

    比较简单的说法就是: 1.break:跳出当前的循环体 2.continue:跳出本次的循环 3.return:返回调用函数(也就完全的跳出了函数块) 好,下面就是我的代码练习君了: package ...

  10. jquery获取第几个元素的方法总结

    使用jquery时经常会遇到,选择器选择一组元素后,需要在这组元素中找到第几个元素. jquery中使用eq()方法找到第几个元素或第N个元素,jquery中eq()的使用如下: eq() 选择器选取 ...