Javascript 标签的属性

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>
posted @   ---空白---  阅读(429)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示