当前位置:首页 > 前端技术 > JS通过HTML标签自身属性获取属性值

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

2022年11月09日 21:19:24前端技术6

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

JS通过HTML标签自身属性获取属性值 _ JavaClub全栈架构师技术笔记

 

 

 

 

作者:-小龙人
来源链接:https://blog.csdn.net/qq_36330228/article/details/88558013

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68963.html

标签: HTML
分享给朋友:

“JS通过HTML标签自身属性获取属性值” 的相关文章

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

HTML - 标签自定义属性

HTML - 标签自定义属性

html标签中,除了标准的属性名外,还可以自定义属性名(属性值为String类型),下面看下两种自定义属性的使用 1.自定义属性名 <body> <button desc="this is a button">Click me!</b...

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

HTML关于border属性的一点小领悟

HTML关于border属性的一点小领悟

在写HTML的时候我们经常会想变换border的颜色或者风格。大多数时候我们是这样做的。 我们为这里的li设置了一个border,然后我们现在想改变border-bottom的颜色。通常我们会有两种做法: 左侧截图中的方法能够改变border-...

HTML5 data-* 自定义属性及其注意点

在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写(后面会说),使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 1.&nbs...

Html5基础及部分常用标签介绍

Html5基础及部分常用标签介绍

一、概念 1、标签 1. 标签由英文状态下的尖括号<和>括起来 如:<html>就是一个标签 2. html中的标签一般都是成对出现的 分为开始标签和结束标签 结束标签比开始标签多了一个/ 如: (1...

HTML5自定义标签使用

以前我们需要自定义属性的时候一般是这样做的,在标签里面加上我们自己设置的一些属性: 在标签里设置自定义属性 然后获取里面的值是使用getAttribute来获取自定义属性里面的值: var myDiv = docume...

HTML学习笔记

html学习笔记 本文根据B站pink老师的视频整理而成,包含常用标签的使用及注意事项。 注意:本篇文章排版不好看,不方便大家阅读,重新排版后的文章在这里:HTML学习笔记 | 常用标签的使用及注意事项(排版后) ht...

标签 align 属性

align=align - 对齐位置 首页  >  HTML标签  > align= align ■ 属性 <标签名  align=...

html5的input类型和所有属性详解

一直以来只知道HTML5中的input标签type属性的属性值有很多,但具体并没有很清楚,这段时间做了个汇总,方便以后使用,也做个知识储备! 在重点介绍type之前,先总结一下input标签的属性: type:该属性是input标签里唯一的必须输入的...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。