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. JavaScript Library – Alpine.js

    前言 Alpine 是高山的意思.Alpine.js 是一个轻量级的 JS Framework. 我为什么会去用它呢? 是这样的,我在做企业网站开发的时候会有 2 个阶段. 第一个 draft 阶段, ...

  2. JavaScript习题之简答题

    1.分别描述HTML.CSS.JS在页面组成中的作用.HTML是超文本标记语言,是用来描述网页的语言,定义网页的结构,内容可以包含文字.图片.视频等. CSS是层叠样式表,定义如何显示HTML元素,比 ...

  3. 线段树can you answer these queries-------hdu4027

    问题描述: 给定一个数列,要求对指定区间内所有数开方,输出查询区间和 输入: 有很多个测试用例,每个用例第一行输出一个整数N,表示数列有N个数,1<=N<=100000;第二行输入N个整数 ...

  4. laravel中添加公共函数

    laravel中添加公共函数 1. 在项目中的新建app/Helper/functions.php文件 2.在项目的跟目录找到composer.json 文件,并打开,然后再autoload中添加如下 ...

  5. iOS定义常量的两种方式define和FOUNDATION_EXPORT

    FOUNDATION_EXPORT的使用方法: 1.h文件 FOUNDATION_EXPORT NSString * const kTestString; 2.m文件NSString * const ...

  6. 一张图带你了解.NET终结(Finalize)流程

    简介 "终结"一般被分为确定性终结(显示清除)与非确定性终结(隐式清除) 确定性终结主要 提供给开发人员一个显式清理的方法,比如try-finally,using. 非确定性终结主 ...

  7. 15 Transformer 框架概述

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  8. BasicDataSourceFactory类简介

    BasicDataSourceFactory实现了javax.naming.spi.ObjectFactory接口.   因此,先从ObjectFactory学习.  一.ObjectFactory接 ...

  9. RTCP报文解析

    RTCP包的头部结构体定义 struct RTCP_Header { unsigned short rc:5; unsigned short padding:1; unsigned short ver ...

  10. Flink on Yarn和k8s

    Yarn 架构 下图为作业提交到yarn的交互流程: 组件列表 ResourceManager (RM):ResourceManager (RM) 负责处理客户端请求.启动 / 监控 Applicat ...