1.为HTML标签设置和添加属性 setAttribute()

setAttribute()方法可以给HTML标签设置/添加属性（原生的属性或者自定义的属性都可以）添加的属性会存储在标签中

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

    </head>

    <style>

        .redFont{

            color:red;

        }

    </style>

    <body>

        <div id="div">我是div</div>

    </body>

</html>

<script>

    var div = document.getElementsByTagName('div')[0]

    // 设置属性值

    div.setAttribute('id','test')

    // 添加属性并赋值

    div.setAttribute('class','redFont')

    // 添加自定义属性

    div.setAttribute('xxx','abc')

</script>

运行结果：（字体变为红色，样式生效）

<div id="test" class="redFont" xxx="abc">我是div</div>

2.获取某个属性的属性值 getAttribute(attr)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

    </head>

    <style>

        .redFont{

            color:red;

        }

    </style>

    <body>

        <div id="test" class="redFont" xxx="abc">我是div</div>

    </body>

</html>

<script>

    var div = document.getElementsByTagName('div')[0]

    var id_value = div.getAttribute('id')

    var class_value = div.getAttribute('class')

    var xxx_value = div.getAttribute('xxx')

    console.log(id_value,class_value,xxx_value) // test redFont abc

</script>

3.删除指定的属性 removeAttribute(attr)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

    </head>

    <style>

        .redFont{

            color:red;

        }

    </style>

    <body>

        <div id="test" class="redFont" xxx="abc">我是div</div>

    </body>

</html>

<script>

    var div = document.getElementsByTagName('div')[0]

    // 删除原生的属性

    div.removeAttribute('id')

    div.removeAttribute('class')

    // 删除子定义的属性

    div.removeAttribute('xxx')

</script>

运行结果：

<div>我是div</div>

4.判断某个属性是否存在 hasAttribute()

  • 传入属性名来判断改属性是否存在，只要该属性存在，无论有没有属性值都返回true，否则返回false
<script>

    var box = document.querySelector('#box')

    //必须要传参，不然报错

    console.log(box.hasAttribute('')) //false

    //已经存在且有值的属性

    console.log(box.hasAttribute('id')) //true

    console.log(box.hasAttribute('class')) //true

    //存在属性但是没有属性值

    console.log(box.hasAttribute('draggable')) //true

    //不存在的属性

    console.log(box.hasAttribute('title')) //false

</script>

5.Attribute()方法与点语法的比较

方法 操作对象 原生属性（id,class,title等） 自定义属性
Attribute()系列 标签 共通 自定义属性存储在标签中
点语法 Dom元素 共通 自定义属性存储在内存中 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

    </head>

    <style>

        .redFont{

            color:red;

        }

    </style>

    <body>

        <div id="test" class="redFont" xxx="abc">我是div</div>

    </body>

</html>

<script>

    var div = document.getElementsByTagName('div')[0]

    // 原生属性是相通的

    console.log(div.getAttribute('id')) //test

    console.log(div.id) //test

    console.log(div.id === div.getAttribute('id')) // true

    // 通过setAttribute修改属性

    div.setAttribute('id','myDiv')

    console.log(div.id) // myDiv

    // 通过点语法修改属性

    div.id = "newId"

    console.log(div.getAttribute('id')) // newId

    // 标签自定义属性只有getAttribute/setAttribute方法才能访问

    console.log(div.getAttribute('xxx')) //abc

    console.log(div.xxx) //undefined

    //点语法添加的自定义属性只有点语法才能访问

    div.yyy = "def"

    console.log(div.yyy) //def

    console.log(div.getAttribute('yyy')) //null

    //class属性比较特殊

    console.log(div.getAttribute('class')) //redFont

    console.log(div.class) //undefined

    console.log(div.className) //redFont

    console.log(div.getAttribute('class') === div.className) // true

</script>

Javascript 标签的属性的更多相关文章

  1. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

  2. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  3. HTML video 视频标签全属性详解

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  4. 关于html标签和属性的基本理解

    一.关于标签和属性的基本理解: html页面的内容主要由"元素"或"标签"组成.使用标签来描述网页的内容. 标签tag一般都是成对出现,开始标签和结束标签,或者 ...

  5. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  6. CSS和JS标签style属性对照表

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-c ...

  7. [转] JavaScript中的属性:如何遍历属性

    在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从 ...

  8. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  9. php过滤HTML标签、属性等正则表达式汇总

    $str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/<[ ] ...

  10. HTML基础篇（标签和属性整--已剔除不被浏览器支持的部分）

    行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...

随机推荐

  1. [TK] 寻宝游戏

    在树上标记若干个点,求出从某个点走过全部点并回到该点的最小路径. 有多次询问,每次询问只改变一个点. 首先是一个暴力的思路. 会发现,从标记点中的其中一个开始走,结果一定更优,并且无论从哪个点开始走, ...

  2. Dos常用命令 - Dir

    Dos命令,用于扫描当前目录创建目录清单 dir /s /b /ad >> "目录清单.txt" 解释: 将 dir /s /b /ad 生成的目录 追加写入目录清单. ...

  3. Serilog文档翻译系列（七） - 应用设置、调试和诊断、开发接收器

    01.应用设置 Serilog 支持在 App.config 和 Web.config 文件中使用简单的 配置语法,以设置最低日志级别.为事件添加额外属性以及控制日志输出. Serilog 主要通过代 ...

  4. 树形结构体按照 sort 进行排序先按照字母排序 然后按照数字排序

    // 先按照字母排序 然后按照数字排序 function sortListByLetter(arr) { return arr.sort((a, b) => { if (isNaN(a.name ...

  5. C++第五节课 函数默认值 函数重载

    #include <iostream> using namespace std; // C++的函数默认值和函数重载 // 函数参数的入栈规则从右往左开始入栈 // 函数重载机制(第一种静 ...

  6. javaScript遍历对象总结

    定义对象: const obj = { name: 'zlx', id: 245, age: 25, gender: '男', } 1. 使用 for... in..循环遍历 对象的属性有2种方式可以 ...

  7. js中判断数据类型的方法有哪些

    判断数据类型可以使用 typeof 但是typeof 判断数组和函数时返回的都是Object 不能具体判断,这时使用 instanceof 可以判断对象是否是另一个函数创造的 : 用法: typeof ...

  8. kotlin集合——>迭代器、区间与数列

    1.迭代器 对于遍历集合元素,Kotlin 标准库支持 迭代器 的常用机制⸺对象可按顺序提供对元素的访问权限,而 不会暴露集合的底层结构.当需要逐个处理集合的所有元素(例如打印值或对其进行类似更新)时 ...

  9. 将NC栅格表示时间维度的数据提取出来的方法

      本文介绍基于Python语言,逐一读取大量.nc格式的多时相栅格文件,导出其中所具有的全部时间信息的方法.   .nc是NetCDF(Network Common Data Form)文件的扩展名 ...

  10. 微软nuget国内源

    https://www.cnblogs.com/Leo_wl/p/16328650.html 为解决国内访问NuGet服务器速度不稳定的问题 ,这里推荐使用NuGet微软官方中国国内镜像 地址:htt ...