JS removeAttribute()方法实现删除元素的某个属性


Posted in Javascript onJanuary 11, 2021

在 JavaScript 中,使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下:
removeAttribute(name)

参数 name 表示元素的属性名。

示例1

下面示例演示了如何动态设置表格的边框。

<script>
  window.onload = function () { //绑定页面加载完毕时的事件处理函数
    var table = document.getElementByTagName("table")[0]; //获取表格外框的引用
    var del = document.getElementById("del");
    var reset = document.getElementById("reset");
    del.onclick = function () {
      table.removeAttribute("border");
    }
    reset.onclick = function () {
      table.setAttribute("border", "2");
    }
</script>
<table width="100%" border="2">
  <tr>
    <td>数据表格</td>
  <tr>
</table>
<button id="del">删除</button><button id="reset">恢复</button>

在上面示例中设计了两个按钮,并分别绑定了不同的事件处理函数。单击“删除”按钮即可调用表格的 removeAttribute() 方法清除表格边框,单击“恢复”按钮即可调用表格的 setAttribute() 方法重新设置表哥便可的粗细。

示例2

下面示例演示了如何自定义删除类函数,并调用该函数删除指定类名。

<script>
  function hasClass (element, className) { //类名检测函数
    var reg = new RegExp ('(\\s|^)' + className + '(\\s|$)');
    return reg.test (element, className); //使用正则检测是否有相同的样式
  }
  function deleteClass (element, className) {
    if (hasClass (element, className)) {
      element.className.replace (reg, ' '); //捕获要删除样式,然后替换为空白字符串
    }
  }
</script>
<div id="red" class="red blue bold">盒子</div>
<script>
  var red = document.getElementById ("red");
  deleteClass (red, 'blue');
</script>

上面代码使用正则表达式检测 className 属性值字符串中是否包含指定的类名,如果存在,则使用空字符串替换掉匹配到的子字符串,从而实现删除类名的目的。

removeAttribute与removeAttributeNode方法异同

removeAttribute

移除节点指定名称的属性。示例如下

document.getElementById('riskTypePie').removeAttribute("style");

removeAttributeNode
注:此方法不兼容IE。

使用方法:

  • 获取要删除属性的元素
  • 获取该元素要删除的属性
  • <元素>.removeAttributeNode<属性>
var node=document.getElementById('chartWrap');
var attr=n.getAttributeNode('style');
node.removeAttributeNode(attr);

异同分析

相同点

  • 两个方法都是用来移除节点属性
  • 两种方法调用者都只能是标签节点

不同点

  • removeAttribute方法接收的是要删除属性的名字
  • removeAttributeNode方法接收的是要删除的属性节点它本身

到此这篇关于JS removeAttribute()方法实现删除元素的某个属性的文章就介绍到这了,更多相关JS removeAttribute()删除元素属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
AngularJS中的模块详解
Jan 29 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
面包屑导航详解
Dec 07 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 #Javascript
vue实现防抖的实例代码
Jan 11 #Vue.js
详解uniapp的全局变量实现方式
Jan 11 #Javascript
微信小程序抽奖组件的使用步骤
Jan 11 #Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 #Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 #Javascript
js删除对象中的某一个字段的方法实现
Jan 11 #Javascript
You might like
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
vue如何判断dom的class
2018/04/26 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue--vuex详解
2019/04/15 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
js实现直播点击飘心效果
2020/08/19 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
pygame实现飞机大战
2020/03/11 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
python实现扫雷游戏的示例
2020/10/20 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
教职工代表大会主持词
2014/04/01 职场文书
加入学生会演讲稿
2014/04/24 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
单位员工收入证明样本
2014/10/09 职场文书