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. OCR技术的昨天今天和明天！2023年最全OCR技术指南！

    OCR是一项科技革新,通过自动化大幅减少人工录入的过程,帮助用户从图像或扫描文档中提取文字,并将这些文字转换为计算机可读格式.这一功能在许多需要进一步处理数据的场景中,如身份验证.费用管理.自动报销. ...

  2. 我对互联网和网站运作的理解 – Domain, DNS, Hosting 介绍

    前言 一直没有写过关于互联网和网站运作的原理相关文章. 这篇就稍微介绍一下它们. 1. 电脑文件 网站是由许多网页组成的, 网页就是电脑里的 file. extension 是 .html 类似于 . ...

  3. ASP.NET Core – View Component

    前言 以前写过 Asp.net core 学习笔记 ( ViewComponent 组件 ), 这篇作为翻新版. 参考 Docs – View components in ASP.NET Core D ...

  4. CSS – Transform

    前言 之前写的 W3Schools 学习笔记 (3) – CSS 2D Transforms. 这篇作为整理. 参考: Youtube – Learn CSS Transform In 15 Minu ...

  5. EF Core – 冷知识

    Add vs AddAsync 参考: .NET 5 REST API Tutorial AddAsync() vs Add() in EF Core EF Core's AddAsync v. Ad ...

  6. SQL Server的Descending Indexes降序索引

    SQL Server的Descending Indexes降序索引 背景索引是关系型数据库中优化查询性能的重要手段之一.对于需要处理大量数据的场景,合理的索引策略能够显著减少查询时间. 特别是在涉及多 ...

  7. P4036 [JSOI2008] 火星人

    #include <bits/stdc++.h> #define int long long using namespace std; int len; int m; int rt = 0 ...

  8. 修改Kubernetes主节点（控制节点）名称

    1.修改物理机主机名 hostnamectl set-hostname <hostname> 2.修改 /etc/kubernetes/manifests 目录下的文件,将文件内容包含旧主 ...

  9. CAS存在的问题及在Java中的解决方式

    CAS 介绍 CAS 可以保证对共享变量操作的原子性 CAS全称Compare And Swap,比较与交换,是乐观锁的主要实现方式.CAS在不使用锁的情况下实现多线程之间的变量同步.Reentran ...

  10. 让查询可以使用 json path

    记录一下最近sv.db的完善 1. 让查询可以使用 json path 有时候我们会存储 json 到 db,也有时会只取json部分数据,或者通过json部分数据进行过滤 所以sv.db 也支持这些 ...