JS通过HTML标签自身属性获取属性值

最新推荐文章于 2025-06-08 15:02:09 发布

-小龙人

最新推荐文章于 2025-06-08 15:02:09 发布

阅读量9.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_36330228/article/details/88558013

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文探讨了在JavaScript中处理HTML元素事件绑定及属性值读取的最佳实践，特别是当HTML由JS动态生成时。文章详细解释了如何正确使用dataset和value属性，以及不同标签类型在读取自身值时的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当JS拼接HTML放在页面时，可能会出现JS中事件无反应情况，下面写法可以避免这个问题

<html>
<header>
    <title>JS通过标签自身属性获取属性值</title>
    <script src="jquery-3.1.1.min.js"></script>
</header>

<!-- 这种方式可以处理 JS拼接成的html片段绑定事件 -->
<body>
    <input value="inputVal" data-name="李四" data-age="15" onblur="funBlur(this)"/>

    <!--注意:在this中取dataset中对应属性时，名称必须用全小写，取标签自身值时必须用value-->
    <input value="inputVal2" data-Name2="张三" data-Age2="18" onblur="funBlur2(this)"/>

    <!--使用span标签 取标签自身值使用textContent-->
    <span data-name="王五" data-age="12" onclick="funClick(this)">spanVal</span>
</body>
<script>
    function funBlur(obj)
    {
        var name = obj.dataset.name;
        var age = obj.dataset.age;
        var inputVal=obj.value;
        console.log("Name:"+name+",Age:"+age+",InputVal:"+inputVal);     
        //Name:李四,Age:15,InputVal:inputVal
    }

    //注意:在this中取dataset中对应属性时，名称必须用全小写，取标签自身值时必须用value
    function funBlur2(obj)
    {
        var name2 = obj.dataset.Name;   //undefined
        var age2 = obj.dataset.Age;     //undefined
        var inputVal2=obj.val;          //undefined
        console.log("Name:"+name2+",Age:"+age2+",InputVal:"+inputVal2);  
        //Name:undefined,Age:undefined,InputVal:undefined
    }

    function funClick(obj)
    {
        var name = obj.dataset.name;
        var age = obj.dataset.age;
        var spanVal=obj.textContent;    //看这里 使用span标签 取标签自身值使用textContent
        console.log("Name:"+name+",Age:"+age+",spanVal:"+spanVal);     
        //Name:王五,Age:12,spanVal:spanVal
    }    
   </script>

</html>

从上面可以看出input和span标签取自身值的方式是不同的，推测其他标签取自身属性值时方式也会有所不同，具体情况应具体对待，使用其他标签时可以使用web浏览器调试查看标签属性，如Google浏览器，F12进入开发着模式，进行断点调试。