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. CSS – Monospaced font & ch unit 等宽字体与 ch 单位

    前言 在做 Statistics Counter 时, 发现总是会跳, 研究后才发现原来是等宽搞的鬼, 这篇就来说说等宽字体. 参考 等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 不等宽字体 ...

  2. ComfyUI 基础教程(五) —— 应用 IP-Adapter 实现图像风格迁移

    中秋假期,又可以玩玩 AI 了.前面介绍了 ComfyUI 的 Lora 模型以及 ControlNet,本文介绍另一个非常重要且使用的节点,IP-Adapter. 一. IP-Adapter 概念 ...

  3. 日干算命api接口_json数据_性格/爱情/事业/财运/健康运势免费接口

    ​ 该API接口基于传统的八字学原理,通过用户提供的日干信息,为用户提供性格.爱情.事业.财运和健康等多方面的运势分析和建议.以下是该接口的详细介绍: ‌一.功能概述‌ ‌性格分析‌:根据用户的日干信 ...

  4. qemu的使用

    一.QEMU的运行模式 直接摘抄自己<揭秘家用路由器0day漏洞挖掘技术>,网上查了一下也没有找到令人满意的QEMU的使用说明,就采用这本书上的介绍.如果后期能够找到比较满意的QEMU的使 ...

  5. 【官宣】2024 DTC数据技术嘉年华全议程发布：汇聚行业精英，共襄年度盛宴

    龙腾四海内,风云际会时.由墨天轮数据社区和中国数据库联盟(ACDU)主办的第十三届数据技术嘉年华 将于2024年4月12日至13日在北京新云南皇冠假日酒店盛大召开.本次大会的主题是"智能·云 ...

  6. C# 中的数组使用

    · // 数组 /// 数组是一组相同类型的数据(ps:js中的数组可以不同类型) 访问通过索引访问数组元素 /// 数组的声明 要使用 new 使用 {} 来初始化数组元素 还需要指定数组的大小 / ...

  7. 统一携带 token

    tokne 可以使用 vuex 和 本地存储处理 : 一些接口需要携带token为了避免代码的重复性,可以在请求拦截器统一加入token ,每次请求都会携带token参数,不需要token参数的接口也 ...

  8. 新手入门使用pinia

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  9. 云原生周刊：Knative 1.15 版本发布｜2024.8.5

    开源项目推荐 helm-secrets helm-secrets 是一个 Helm 插件,用于动态解密加密的 Helm 值文件. Tofu Controller Tofu Controller(以前称 ...

  10. 在 Kubernetes 中基于 StatefulSet 部署 MySQL（上）

    大家好,我是老 Z! 本文实现了 MySQL 数据库在基于 KubeSphere 部署的 K8s 集群上的安装部署,部署方式采用了图形化这种形式.下一篇文章将会涉及 GitOps 的基础操作,部署过程 ...