JS通過HTML標簽自身屬性獲取屬性值


當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進入開發着模式,進行斷點調試。

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM