关于: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= ...
随机推荐
- [阿里DIN] 模型保存,加载和使用
[阿里DIN] 模型保存,加载和使用 0x00 摘要 Deep Interest Network(DIN)是阿里妈妈精准定向检索及基础算法团队在2017年6月提出的.其针对电子商务领域(e-comme ...
- 开源一款I2C电机驱动扩展板-FreakStudio多米诺系列
总线直流电机扩展板 原文链接: FreakStudio的博客 摘要 设计了一个I2C电机驱动板,通过I2C接口控制多个电机的转速和方向,支持刹车和减速功能.可连接16个扩展板,具有PWM输出.过流过热 ...
- K230学习记录
K230学习记录 参考自: # 立创·庐山派-K230-CanMV开发板资料与相关扩展板软硬件资料官网全部开源 # 开发板官网:www.lckfb.com # 技术支持常驻论坛,任何技术问题欢迎随时交 ...
- TensorFlow 的基本概念和使用场景
TensorFlow是一个开源的机器学习框架,由Google开发并维护.它提供了一个灵活的编程环境,用于构建和训练各种机器学习模型.TensorFlow是基于图计算的模型,其中节点表示数学操作,而边表 ...
- docker - [14] redis集群部署
本章节是在一个服务器上进行演示 一.准备工作 (1)创建redis集群使用的网络:redis-net docker network create redis-net --subnet 172.38.0 ...
- Shell - shell中的数组
Shell 数组用括号来表示,元素用 "空格" 符号分隔开,语法格式如下: arrName = (value1 value2 value3)(这种方式带值) 往数组里添加值,数组的 ...
- Qt修改exe文件图标
修改Qt生成exe的图标以及软件标题图标 目录 修改Qt生成exe的图标以及软件标题图标 简介 QtCreator下添加exe图标 直接添加.ico 通过.rc文件修改 Visual Studio下添 ...
- emlog 制作一个小插件(截取正文生成 xx 字摘要)的过程
blockquote { background: rgba(255, 255, 0, 1); color: rgba(255, 0, 0, 1) !important } 如果熟悉其他 PHP 平台的 ...
- apisix~key-auth多消费的使用
在 APISIX 中使用 key-auth 插件实现基于密钥的认证,以下是详细的配置步骤,包括如何保存密钥和证书,以及如何将这些信息分配给客户端 A 和 B. 场景说明 服务 C 是后端服务,需要通过 ...
- ANSYS实体单元施加扭矩方法分析
ANSYS 结构分析单元与应用-王新敏等(P199) 此处以等截面椭圆柱为例. 对实体单元施加扭矩,主要方法如下: 引入质量单元 MASS21 并新建顶面的中心节点,随后将顶面所有节点通过 cerig ...