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 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
Vue核心概念Getter的使用方法
2019/01/18 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python数值基础知识浅析
2019/11/19 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
历史学专业毕业生求职信
2013/09/27 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
总经理任命书
2014/03/29 职场文书
关于学习的演讲稿
2014/05/10 职场文书
合同意向书范本
2014/07/30 职场文书
2014财务年度工作总结
2014/11/11 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
电影开国大典观后感
2015/06/04 职场文书
2016年教师节慰问信
2015/12/01 职场文书
中学音乐课教学反思
2016/02/18 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL