最近项目需要把后端传过来的数据隐藏的保存在页面中,方便后边做事件处理时使用。鉴于之前总是在后端处理后的页面中看到元素里除了常见的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. oracle数据导入导出,备份还原命令expdp&impdp(只导出元数据,不导出表数据,最全,最完善的步骤)

    感谢金龙鱼先生分享,原文来自https://blog.csdn.net/kou869929526/article/details/125791113 一,编码要求以及数据库版本要求 检查数据库版本(用 ...

  2. 在离线环境使用nuget包

    原来程序集的引用 一个项目所有功能我们不可能都自己写对吧.这个时代 引用一大片的第三方包  项目源文件几百兆 ,有可能第三方包占了总体积99%.有可能我们自己写的代码不过几十行.想想我们原来的 老时代 ...

  3. 巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

    在之前,我们有些过这么一篇文章 - 使用 CSS 轻松实现高频出现的各类奇形怪状按钮. 里面包含了如下这些图形: 你可以在这里看到:CodePen Demo -- CSS Various Button ...

  4. Luogu P10842 Piggy and Trees 题解 [ 绿 ] [ 拆边 ] [ 贡献思维 ] [ 组合数学 ]

    Piggy and Trees:把路径拆成边的思维题. 思路 一看到这题的路径,就想到了 Luogu P3177 树上染色 这题化路径为边的贡献,分别计算的思维. 那么对于此题,先来观察题目里式子的意 ...

  5. 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!

    1 大人,时代变了! 赶快把自有业务的本地AI"模型"训练起来! 1.1 背景   目前AI已经大行其道,chatGPT.DeepSeek等如雨后春笋般涌现出来,笔者做为一个守旧派 ...

  6. 安全稳定地远程访问飞牛NAS

    春节前从一个网友那里了解到一个新的NAS--飞牛. 起因是我们一个用户用我们的SD-WAN来远程访问飞牛NAS,市面上做NAS的很多,之所以单独体验这个产品主要是: 不需要购买硬件,这个是非常重要的, ...

  7. 互联网和DeepSeak时代,获取信息这么容易,为什么我们还是学习不好?

    因为人性倾向于立即获得享受,而不是延迟获得享受,然而,学习就是延迟获得享受,所以,学习,其实是反人性的一种活动. 学习,特别是对知识的深入学习,其实需要付出大量的时间和精力,这个过程中必然伴随着各种各 ...

  8. 青岛oj集训1

    2025/3/4 内容:有向无环图(DAG) 优点:DAG有很多良好性质 拓扑排序 用处:可以根据拓扑序进行dp 这次计算所用的所有边的权值都是有计算过的 一张DAG图肯定有拓扑序(bfs序,dfs序 ...

  9. Oracle 23ai TPC-H 测试环境部署

    最近,我在 Oracle Database 23ai 上进行了 TPC-H 100GB 测试,并整理了完整的实施步骤和优化经验.如果你也想评估 Oracle 数据库在决策支持场景下的性能,可以参考我的 ...

  10. H3C S520 V3 端口流量镜像

    背景: 最近公司需要采集某工业PLC设备报文,临时查询了一下如何使用H3C交换机配置流量镜像. PLC地址: 192.168.3.213 MAC: e0:dc:a0:5c:47:2f (可通过ARP ...