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>