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

 更新时间:2021年01月11日 15:54:06   作者:C语言中文网  
这篇文章主要介绍了JS removeAttribute()方法实现删除元素的某个属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在 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中this的用法实例分析

    JavaScript中this的用法实例分析

    这篇文章主要介绍了JavaScript中this的用法,结合实例形式分析了this的功能、常见用法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JS按位非(~)运算符与~~运算符的理解分析

    JS按位非(~)运算符与~~运算符的理解分析

    按位非运算符,简单的理解就是改变运算数的符号并减去1,当然,这是只是简单的理解能转换成number类型的数据
    2011-07-07
  • es6中let和const的使用方法详解

    es6中let和const的使用方法详解

    这篇文章主要介绍了es6中let和const的使用方法,结合实例形式详细分析了es6中let和const的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 基于JS实现仿百度百家主页的轮播图效果

    基于JS实现仿百度百家主页的轮播图效果

    本文给大家分享基于html和js实现的仿百度百家主页的轮播图效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-03-03
  • 使用OPENLAYERS3实现点选的方法

    使用OPENLAYERS3实现点选的方法

    这篇文章主要为大家详细介绍了使用OPENLAYERS3实现点选的几种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • NodeJS Express框架中处理404页面一个方式

    NodeJS Express框架中处理404页面一个方式

    这篇文章主要介绍了NodeJS Express框架中处理404页面一个方式,原理就是把404路由放在最后匹配,也就是路由中没有定义的全部转到404页面,需要的朋友可以参考下
    2014-05-05
  • 小程序scroll-view安卓机隐藏横向滚动条的实现详解

    小程序scroll-view安卓机隐藏横向滚动条的实现详解

    这篇文章主要介绍了小程序scroll-view安卓机隐藏横向滚动条的实现详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 图解js图片轮播效果

    图解js图片轮播效果

    这篇文章主要以图片展示的方式向大家讲解了js图片轮播效果的实现方法,对图片轮播实现原理进行了详细介绍,感兴趣的朋友可以参考一下
    2015-12-12
  • javascript封装简单实现方法

    javascript封装简单实现方法

    这篇文章主要介绍了javascript封装简单实现方法,涉及javascript中方法与属性的相关设置与使用技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • webpack@v4升级踩坑(小结)

    webpack@v4升级踩坑(小结)

    这篇文章主要介绍了webpack@v4升级踩坑(小结),之前就尝试了升级,由于部分插件的原因,未能成功,今天就来试一下在我的项目中升级会遇到哪些坑。感兴趣的小伙伴们可以参考一下
    2018-10-10

最新评论