最近项目需要把后端传过来的数据隐藏的保存在页面中,方便后边做事件处理时使用。鉴于之前总是在后端处理后的页面中看到元素里除了常见的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. 简单聊一下*SWITCH*交换机的作用

    交换机 交换机工作在数据链路层的物理设备或者说是接入层的物理设备,转发数据帧. 随着企业网络的发展,越来越多的用户需要接入到网络,交换机提供的大量的接入端口能够很好地满足这种需求.同时,交换机也彻底解 ...

  2. linux mint安装微信

    sudo apt install snapd snappy sudo snap install electronic-wechat deepin-music 安装微信与深度音乐

  3. 优化-iceberg调参优化

    一.建表优化 1.iceberg表支持更新操作. 文档:https://iceberg.apache.org/docs/latest/configuration/ 功能描述:因v1只支持insert, ...

  4. HBase多租户分组

    一.分组简介 RegionServer Group 通过对 RegionServer 进行分组,不同的 RegionServer 分到不同的组.每个组可以按需挂载不同的表,并且当组内的表发生异常后,R ...

  5. 0帧起手将腾讯混元大模型集成到Spring AI的全过程解析

    在前面,我们已经为大家铺垫了大量的知识点,并深入解析了Spring AI项目的相关内容.今天,我们将正式进入实战环节,从零开始,小雨将带领大家一步步完成将第三方大模型集成到Spring AI中的全过程 ...

  6. 7. Docker 容器数据卷的使用(超详细的讲解说明)

    7. Docker 容器数据卷的使用(超详细的讲解说明) @ 目录 7. Docker 容器数据卷的使用(超详细的讲解说明) 1. Docker容器数据卷概述 2. Docker 容器数据卷的使用演示 ...

  7. RabbitMQ(一)——简介

    RabbitMQ系列 RabbitMQ(一)--简介 RabbitMQ(二)--模式类型 RabbitMQ(三)--简单模式 RabbitMQ(四)--工作队列模式 RabbitMQ(五)--发布订阅 ...

  8. 在私有化部署的 Gitlab 实例中开启内置的容器镜像仓库

    版本 极狐 GitLab v16.1.2-jh 步骤 如果使用 Let's Encrpt 集成,容器镜像仓库功能自动开启,访问地址为 your-gitlab-domain:5050. 否则,默认不开启 ...

  9. 动手学深度学习-python基础知识介绍(数据处理基础流程)part2

    数据预处理 import os os.makedirs(os.path.join('..','data'),exist_ok=True) data_file=os.path.join('..','da ...

  10. ABB工业机器人控制柜IRC5维修具体细节

    对于ABB机器人维修工作,需要具备专业的知识和技能,同时遵循维修步骤和注意事项.通过加强预防措施和建议的实施,可以有效降低ABB工业机器人控制柜IRC5的故障率,提高ABB工业机器人的整体运行效率. ...