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. OData – 坑

    前言 OData 有很多很多的坑,我的主张是能少用一样是一样,比如 Batch Processing 不要用,Inheritance 不要用,除了 GET 其它 PUT POST DELETE 都不要 ...

  2. Angular – ESLint

    介绍 Angular wrap 了一层 ESLint, 定义了一些 best practice guide. 这篇说说如何 setup 它. 这个 ESLint 并不是 under Angular T ...

  3. java_day2_常量，变量，数据类型，运算符

    一.常量 常量:在Java程序运行过程中其值不能发生改变的量 分类: 1.字面值常量: 整数常量 表示所有的整数,包括负数 10 -8 小数常量 表示所有的小数 1.23 -3.14 布尔常量 tru ...

  4. SpringBoot——基础配置

    基础配置 配置格式 SpringBoot提供了多种属性配置方法 application.properties server.port=80 application.yml server: port: ...

  5. HTTP——响应数据格式

    HTTP响应数据格式    状态码分类:    常见的状态响应码:      

  6. SpringBoot 实现文件上传

    参考:Java springboot进阶教程 文件上传功能实现 后端代码编写 常见错误分析与解决 在 Service 业务层接口中增加一个上传文件的方法 因为文件并不是上传至数据库中,所以不需要编写 ...

  7. 逆向 Virustotal 搜索接口 X-VT-Anti-Abuse-Header

    逆向 Virustotal 搜索接口 X-VT-Anti-Abuse-Header 搜索示例 搜索 123,网页地址为:https://www.virustotal.com/gui/search/12 ...

  8. webgl和canvas的区别

    webgl和canvas的区别 WebGL和Canvas的主要区别在于它们的渲染方式.功能复杂性.以及编程难度.12 渲染方式:Canvas使用2D渲染上下文来绘制图形和图像,基于像素的绘图系统, ...

  9. go~wasm插件的开发

    Go和TinyGo是两种不同的Go语言编译器,它们之间有以下几点区别: 目标平台: Go:Go语言编译器主要面向通用计算机平台,如Windows.Linux.macOS等. TinyGo:TinyGo ...

  10. 云原生周刊：Kubernetes 1.29 中的删除、弃用和主要更改 ｜ 2023.11.27

    开源项目推荐 Orphaned ConfigMaps 该版本库包含一个脚本,用于识别 Kubernetes 命名空间中的孤立的配置映射.孤立的配置映射是指那些未被命名空间中的任何活动 Pod 或容器引 ...