关于:js怎么获取元素的自定义属性的问题(原生JavaScript)
最近项目需要把后端传过来的数据隐藏的保存在页面中,方便后边做事件处理时使用。鉴于之前总是在后端处理后的页面中看到元素里除了常见的id、name属性外的data-xxx,就想到:元素的属性必然是可以自定义并获取到的,百度了下,原来JavaScript本来就自带有函数getAttribute( )用于获取只定义属性,于是迫不及待的写了个demo:
data = new Array();
<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>
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)的更多相关文章
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
- js/jquery获取元素,元素筛选器
1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...
- js,jq获取元素位置属性及兼容性写法
网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop //ie,谷歌浏览器和没有 ...
- js中获取元素的样式兼容性的写法
1:设计元素的样式:el.style.color="red"||el.style["color"]="red" 获取元素的样式:el.st ...
- js JQuery 获取元素和遍历
用户名<input class="yonghu" type="text" id="user" name="u" / ...
- js之获取元素最终css属性
很多时候 我们是不用jquery库的,虽然他很好,获取元素最终的css属性我们可以用:getComputedStyle window.getComputedStyle(element, null).g ...
- (知识点)JS中获取元素的样式
首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...
- js this获取元素ID
<table id="cyyj_table" class="table01" cellpadding="5" cellspacing= ...
随机推荐
- 使用TUniSQLMonitor监视SQL语句执行的耗时
//代码来自官方论坛type TUniSqlMonitorEx = class(TUniSqlMonitor) private FExecuteDuration: Cardinal; FFinalEv ...
- 我把deepseek等大模型接入了微信公众号,打造个人AI助手
前言 最近deepseek大模型可是火出了圈,给国产大模型公司点赞.于是乎去deepseek试了一下效果,奈何太多人使用了,问两句来一句 "服务器繁忙,请稍后再试",体验感实在太差 ...
- 为什么TCP需要三次握手?深入解析背后的设计哲学
在互联网通信中,TCP(传输控制协议)是确保数据可靠传输的基石.而TCP连接的建立过程--"三次握手"(Three-Way Handshake),看似简单的三个步骤,却蕴含了网络协 ...
- flutter - [02] 基本语法
题记部分 一.注释 ///这是一个注释 //这也是个注释 /* 这还是个注释 */ void main(List<String> args) { print ('你好 dart'); } ...
- Live2D - 模型预览图
chitose epsilon2_1 haru-01 haru-02 hijiki tororo vert_normal vert_swimwear ryoufuku seifuku ...
- CentOS7搭建CDH5.15.0集群
CentOS7搭建CDH5.15.0集群 一.节点说明 节点 Server/Agent Memory master Server & agent 4G node1 agent 2G node2 ...
- FormCreate中在事件中获取api
form-create中在事件中获取api FormCreate 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持5个UI框架,并且支持生成任何 Vue 组件. ...
- 【Python】ini解析ERROR:没有实例属性‘__getintem__’
abaqus python 搭配ini 时,出现AttributeError: ConfigParser instance has no attribute 'getitem' 20230404 ed ...
- java如何实现对List集合进行分页
对List集合进行分页: private <T> Page<T> listToPage(List<T> dataList, Integer pageSize, In ...
- go sync.map的使用
前言 数据竞争是并发情况下,存在多线程/协程读写相同数据的情况,必须存在至少一方写.另外,全是读的情况下是不存在数据竞争的. Go语言中的 map 在并发情况下,只读是线程安全的,同时读写是线程不安全 ...