자바스크립트 요소에서 지정된 속성을 삭제하는 방법

青灯夜游
풀어 주다: 2021-10-08 17:07:26
원래의
2998명이 탐색했습니다.

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

자바스크립트 요소에서 지정된 속성을 삭제하는 방법

本教程操作环境: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高级教程

위 내용은 자바스크립트 요소에서 지정된 속성을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿