最近项目需要把后端传过来的数据隐藏的保存在页面中,方便后边做事件处理时使用。鉴于之前总是在后端处理后的页面中看到元素里除了常见的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. 使用TUniSQLMonitor监视SQL语句执行的耗时

    //代码来自官方论坛type TUniSqlMonitorEx = class(TUniSqlMonitor) private FExecuteDuration: Cardinal; FFinalEv ...

  2. 我把deepseek等大模型接入了微信公众号,打造个人AI助手

    前言 最近deepseek大模型可是火出了圈,给国产大模型公司点赞.于是乎去deepseek试了一下效果,奈何太多人使用了,问两句来一句 "服务器繁忙,请稍后再试",体验感实在太差 ...

  3. 为什么TCP需要三次握手?深入解析背后的设计哲学

    在互联网通信中,TCP(传输控制协议)是确保数据可靠传输的基石.而TCP连接的建立过程--"三次握手"(Three-Way Handshake),看似简单的三个步骤,却蕴含了网络协 ...

  4. flutter - [02] 基本语法

    题记部分 一.注释 ///这是一个注释 //这也是个注释 /* 这还是个注释 */ void main(List<String> args) { print ('你好 dart'); } ...

  5. Live2D - 模型预览图

    chitose epsilon2_1       haru-01   haru-02 hijiki tororo vert_normal vert_swimwear ryoufuku seifuku ...

  6. CentOS7搭建CDH5.15.0集群

    CentOS7搭建CDH5.15.0集群 一.节点说明 节点 Server/Agent Memory master Server & agent 4G node1 agent 2G node2 ...

  7. FormCreate中在事件中获取api

    form-create中在事件中获取api FormCreate 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持5个UI框架,并且支持生成任何 Vue 组件. ...

  8. 【Python】ini解析ERROR:没有实例属性‘__getintem__’

    abaqus python 搭配ini 时,出现AttributeError: ConfigParser instance has no attribute 'getitem' 20230404 ed ...

  9. java如何实现对List集合进行分页

    对List集合进行分页: private <T> Page<T> listToPage(List<T> dataList, Integer pageSize, In ...

  10. go sync.map的使用

    前言 数据竞争是并发情况下,存在多线程/协程读写相同数据的情况,必须存在至少一方写.另外,全是读的情况下是不存在数据竞争的. Go语言中的 map 在并发情况下,只读是线程安全的,同时读写是线程不安全 ...