原生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;

}

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

})

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

vue数组修改不触发视图更新、vue向响应式对象添加或删除属性
背景:在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况以下4种情况不触发vue响应式更新!! 不能检测到的数组变动是: 1.当利用索引直接设置一个项时,例如:vm.item ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
js原生获取html的高度,如何通过js获取Html元素的实际宽度高度
如何通过js获取Html元素的实际宽度高度发布时间:2020-04-24 15:23:24 来源:亿速云阅读:136 作者:小新今天小编给大家分享的是如何通过js获取Html元素的实际宽度高度, ...
JS元素属性操作方法，包括获取属性，修改属性，删除属性
JS元素属性操作方法,包括获取属性,修改属性,删除属性本篇记录JS元素属性的操作的方法.其中包含获取属性两个方法,修改属性两个方法,删除属性一个方法获取属性 element.属性该方法通常获取自 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
html或原生js是单一对应绑定的,原生js数据绑定
双向数据绑定是非常重要的特性 -- 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验.我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 -- 一种为Object.observe ...
html js 遍历数组,分享几种原生JS数组遍历的方法和应用
数组遍历,对于前后端开发人员,是必须掌握的方法,那么数组遍历有哪些方法呢? OK,今天就分享几种原生JS方法,从原生开始学习,有助于大家应用到各种框架[小程序.三大框架等]中去,毕竟原生才是基本.一共 ...
元素多层嵌套，JS获取问题
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...

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

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

最新文章

热门文章