获取元素的属性
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>
拓展阅读
jquery中attr()和prop()的区别