Home >Web Front-end >JS Tutorial >How to delete specified attributes from elements in javascript

How to delete specified attributes from elements in javascript

青灯夜游
青灯夜游Original
2021-10-08 17:07:263030browse

在JavaScript中,可以使用removeAttribute()方法来删除元素的指定属性,语法“removeAttribute(name)”,参数name表示需要删除的元素属性名。

How to delete specified attributes from elements in javascript

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

在 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 (&#39;(\\s|^)&#39; + className + &#39;(\\s|$)&#39;);
        return reg.test (element, className);  //使用正则检测是否有相同的样式
    }
    function deleteClass (element, className) {
        if (hasClass (element, className)) {
            element.className.replace (reg, &#39; &#39;);  //捕获要删除样式,然后替换为空白字符串
        }
    }
</script>
<div id="red" class="red blue bold">盒子</div>
<script>
    var red = document.getElementById ("red");
    deleteClass (red, &#39;blue&#39;);
</script>

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

【推荐学习:javascript高级教程

The above is the detailed content of How to delete specified attributes from elements in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn