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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
新员工入职感言
2014/02/01 职场文书
运动会800米加油稿
2014/02/22 职场文书
模具专业自荐信
2014/05/29 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
设置IIS Express并发数
2022/07/07 Servers