经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS removeAttribute()方法实现删除元素的某个属性
来源:jb51  时间:2021/1/11 17:28:24  对本文有异议

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

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

示例1

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

  1. <script>
  2. window.onload = function () { //绑定页面加载完毕时的事件处理函数
  3. var table = document.getElementByTagName("table")[0]; //获取表格外框的引用
  4. var del = document.getElementById("del");
  5. var reset = document.getElementById("reset");
  6. del.onclick = function () {
  7. table.removeAttribute("border");
  8. }
  9. reset.onclick = function () {
  10. table.setAttribute("border", "2");
  11. }
  12. </script>
  13. <table width="100%" border="2">
  14. <tr>
  15. <td>数据表格</td>
  16. <tr>
  17. </table>
  18. <button id="del">删除</button><button id="reset">恢复</button>

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

示例2

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

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

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

removeAttribute与removeAttributeNode方法异同

removeAttribute

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

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

removeAttributeNode
注:此方法不兼容IE。

使用方法:

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

异同分析

相同点

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

不同点

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号