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

版权声明:本文为博主原创文章,若转载请标明。 https://blog.csdn.net/qq_36330228/article/details/88558013

当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进入开发着模式,进行断点调试。

 

 

 

 

没有更多推荐了,返回首页