原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...

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');

以上上面代码实例全部

元素属性

*{

margin:0;

padding:0;

list-style:none;

}

a{

color: #5579ee;

cursor: pointer;

}

元素属性获取(class为test1)

属性名：

元素属性设置(修改class为test2的值为test-spe)

设置的属性名：

元素属性删除(删除data属性)

删除属性名：

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);

})