首页前端开发JavaScriptJS removeAttribute()方法实现删除元素的某个属性

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

时间2024-01-31 13:55:03发布访客分类JavaScript浏览150
导读:收集整理的这篇文章主要介绍了JS removeAttribute( 方法实现删除元素的某个属性,觉得挺不错的,现在分享给大家,也给大家做个参考。 在 JavaScript 中,使用元素的...
收集整理的这篇文章主要介绍了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()删除元素属性内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能感兴趣的文章:
  • JS删除对象中某一属性案例详解
  • json实现添加、遍历与删除属性的方法
  • JavaScript对象属性检查、增加、删除、访问操作实例
  • js delete 用法(删除对象属性及变量)
  • JavaScript中对象属性的添加和删除示例
  • javascript动态添加、修改、删除对象的属性与方法详解

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: js动态生成表格(节点操作)下一篇:详解ES6 中的Object.assign()的用...猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处: JS removeAttribute()方法实现删除元素的某个属性
本文地址: https://pptw.com/jishu/594047.html
c语言double类型默认输出几位小数? Vue中ref和$refs的介绍以及使用方法示例

游客 回复需填写必要信息