JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
2018-05-06 22:20
736 查看
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
以下内容:
一、获取元素的属性
二、设置元素的属性
三、删除元素的属性
一、获取元素的属性
1-原生JS
获取属性 .getAttribute("属性")
2-jquery
获取属性 .attr("属性")
示例代码
/*jq获取属性*/ var temp = $('.test1').attr('class'); /*js获取属性*/ var temp = document.getElementById('test1').getAttribute('data');
二、设置元素的属性
1-原生JS
设置属性 .setAttribute("属性","值")
2-jquery
设置属性 .attr("属性","值")
实例代码
/*jq设置属性*/ var temp2= $('.test2').attr('class','test-spe'); /*js设置属性*/ var temp2= document.getElementById('test2').setAttribute('data','self-name-2');
三、删除元素的属性
1-原生JS
删除属性 .removeAttribute
2-jquery
删除属性 .removeAttr
示例代码
/*jq删除属性*/ var temp = $('.test1').removeAttr('data'); /*js删除属性*/ var temp = document.getElementById('test1').removeAttribute('data');
以上上面代码实例全部
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>元素属性</title> <style> * { margin:0; padding:0; list-style:none; } a{ color: #5579ee; cursor: pointer; } </style> </head> <body> <div id="mayouchen" style="width: 500px;margin: 50px auto;"> <a id="test1" class="test1">元素属性获取(class为test1)</a> <p><span>属性名:</span><span class="test1_2"></span></p> <br /> <a id="test2" class="test2">元素属性设置(修改class为test2的值为test-spe)</a> <p><span>设置的属性名:</span><span class="test2_2"></span></p> <br /> <a id="test3" class="test3" data="self-name">元素属性删除(删除data属性)</a> <p><span>删除属性名:</span><span class="test3_1"></span></p> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $('.test1').on('click',function(){ /*jq获取属性*/ var temp = $('.test1').attr('class'); /*js获取属性*/ var temp = document.getElementById('test1').getAttribute('class'); console.log(temp); $('.test1_2').text(temp); }) $('.test2').on('click',function(){ /*jq设置属性*/ var temp2= $('.test2').attr('class','test-spe'); /*js设置属性*/ var temp2= document.getElementById('test2').setAttribute('class','test-spe'); var temp_spe = $('.test-spe').attr('class'); $('.test2_2').text(temp_spe); }) $('.test3').on('click',function(){ var tempSpe = $('.test3').attr('data'); /*jq删除属性*/ var temp = $('.test3').removeAttr('data'); /*js删除属性*/ var temp = document.getElementById('test3').removeAttribute('data'); console.log(tempSpe); $('.test3_1').text(tempSpe); }) </script> </body> </html>
相关文章推荐
- js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)
- JS获取元素属性和自定义属性
- 原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName
- JS原生属性选择器querySelector----通过href属性获取对应a标签的Dom元素
- js原生获取元素的css属性
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- 原生JS获取元素属性
- js,jq获取元素位置属性及兼容性写法
- 原生JS获取元素css属性
- jQuery 获取/设置/删除DOM元素的属性以a元素为例
- 获取页面中被选中元素的 JS原生方法 与 jQuery方法 分析
- JS获取自定义属性data值
- 用js/JQuery获取/设置元素属性
- jquery的attr方法与ie7不兼容,js获取html标签自定义属性
- js 如何获取自定义属性的值
- 【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数
- 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
- 原生js直接获取父节点、子节点、兄弟节点的元素节点,不包含空白节点
- js与jquery获取父元素,删除子元素的不同方法
- js/jq修改或获取CSS属性,DOM属性