最近项目需要把后端传过来的数据隐藏的保存在页面中,方便后边做事件处理时使用。鉴于之前总是在后端处理后的页面中看到元素里除了常见的id、name属性外的data-xxx,就想到:元素的属性必然是可以自定义并获取到的,百度了下,原来JavaScript本来就自带有函数getAttribute( )用于获取只定义属性,于是迫不及待的写了个demo:


<input type="button" id="data" data-id=1 data-url="http://localhost" name="" value="data" onclick="getdata(this,['data-id','data-url'])"> <script type="text/javascript">
function getdata(agr,arr){
data = new Array();
for(i=0;i<arr.length;i++){
data[i]=document.getElementById(agr.id).getAttribute(arr[i]);
}
console.log(data);
}
</script>
data = new Array();
for(i=0;i<arr.length;i++){
data[i]=document.getElementById(agr.id).getAttribute(arr[i]);
}
console.log(data);
}
</script>

没错,控制台输出了:["1", "http://localhost"]   美滋滋…

顺便测了下兼容性:

现代浏览器(火狐、QQ、IE>=9)都支持,可以将属性加载input、li、span甚至XML等任意标签上,IE8即以下会报错:SCRIPT438: 对象不支持此属性或方法

获取、设置元素的属性:

1-原生JS

       设置属性 .setAttribute("属性","值")
获取属性 .getAttribute("属性")

2-jquery

       设置属性 .attr("属性","值")
获取属性 .attr("属性")

关于:js怎么获取元素的自定义属性的问题(原生JavaScript)的更多相关文章

  1. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  2. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  3. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

  4. js/jquery获取元素,元素筛选器

    1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...

  5. js,jq获取元素位置属性及兼容性写法

    网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop   //ie,谷歌浏览器和没有 ...

  6. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  7. js JQuery 获取元素和遍历

    用户名<input class="yonghu" type="text" id="user" name="u" / ...

  8. js之获取元素最终css属性

    很多时候 我们是不用jquery库的,虽然他很好,获取元素最终的css属性我们可以用:getComputedStyle window.getComputedStyle(element, null).g ...

  9. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  10. js this获取元素ID

    <table id="cyyj_table" class="table01" cellpadding="5" cellspacing= ...

随机推荐

  1. .net 通过 HttpClient 下载文件同时报告进度的方法

    通过 HttpClient 的 ContentLength 很多时候都可以拿到下载的内容的长度,通过 ReadAsync 可以返回当前读到的长度,将读取到的长度加起来就是已经下载的长度 看起来很简单, ...

  2. oracle11gRAC升级到19C

    升级oracle11g集群到19.3 前述环境检查: [root@qhdb1 ~]# crsctl status res -t ------------------------------------ ...

  3. Django-Admin和第三方插件Xadmin

    Admin django内置了一个强大的组件叫Admin,提供给网站管理员快速开发运营后台的管理站点. 站点文档: https://docs.djangoproject.com/zh-hans/2.2 ...

  4. FreeSql学习笔记——8.数据返回类型

    前言   FreeSql数据返回格式比较丰富,包括单条.列表.导航属性数据.指定字段.Dto等:可以有效的减少代码量,减少字段复制等操作:   前面的查询已经用到了日常基本需要用到的数据格式,本篇是常 ...

  5. flutter ios 深色模式下状态栏文字是白色的,白色背景下看不见

    flutter ios 深色模式下状态栏文字是白色的,白色背景下看不见 theme: ThemeData( appBarTheme: const AppBarTheme( systemOverlayS ...

  6. CTFHub技能树-密码口令wp

    引言 仅开放如下关卡 弱口令 通常认为容易被别人(他们有可能对你很了解)猜测到或被破解工具破解的口令均为弱口令. 打开环境,是如下界面,尝试一些弱口令密码无果 利用burpsuite抓包,然后爆破,发 ...

  7. [ZJOI2019] 语言 题解

    不愧是 \(ZJOI\),<最可做的一道题>都让人一头雾水-- 首先将问题转化到链上. 可以将总共的组数转化为每个点可以到达的城市. 明显给每个点建一棵动态开点线段树,维护可以和他通商的点 ...

  8. 无界 | Bncr | Boundless Nodejs Chat Robot 机器人框架安装使用教程

    背景:Bncr 是一个开箱即用的Nodejs Chat RoBot(会话式机器人)框架.它基于OOP函数响应式编程,具有占用小.响应快.开发易等特点,允许开发者创建高度可测试.可扩展.松散耦合且易于维 ...

  9. spring - [01] 简介

    Spring发展至今,已经形成了一个生态体系(Spring全家桶) 001 || Spring 定义   Spring是一款主流的Java EE轻量级开源框架,目的是用于简化Java企业级应用的开发难 ...

  10. Spark - 面试题

    Spark是什么?答案:Apache Spark是一个快速.通用的大数据处理引擎,它提供了大规模数据集的内存计算和分布式计算能力.Spark可以处理各种数据源,如HDFS.Hive.Cassandra ...