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进入开发着模式，进行断点调试。
作者：-小龙人
来源链接：https://blog.csdn.net/qq_36330228/article/details/88558013
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
