zoukankan      html  css  js  c++  java
  • 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进入开发着模式,进行断点调试。

  • 相关阅读:
    NC portal怎么重新开始入门,整个配置过程包括配置一个节点
    NChome如何创建单据跟主子表还有扩展开发要怎么弄?
    还是有必要确定一下自己到底在做是什么
    os.path模块
    re模块
    Django settings配置文件
    自定义分页器
    AJAX
    AJAX 一些常用方法
    AJAX 简单上手
  • 原文地址:https://www.cnblogs.com/wangqilong/p/12540400.html
Copyright © 2011-2022 走看看