jQuery에서 속성을 동적으로 제거하는 방법에 대해 이야기해 보겠습니다.-프런트엔드 Q&A-php.cn

jQuery attr() 개요

jQuery removeAttr() 方法

집

웹 프론트엔드

프런트엔드 Q&A

jQuery에서 속성을 동적으로 제거하는 방법에 대해 이야기해 보겠습니다.

PHPz

Apr 06, 2023 am 09:10 AM

jQuery는 DOM 조작이 수행되는 방식을 최적화, 단순화 및 통합하는 널리 사용되는 JavaScript 라이브러리입니다. jQuery는 DOM 요소의 속성 및 콘텐츠 추가, 삭제, 수정 등과 같은 일반적인 DOM 작업의 사용을 용이하게 하기 위해 다수의 캡슐화된 함수를 제공합니다. 그 중 attr() 함수는 DOM 요소의 속성값을 가져오거나 설정하는 데 사용되는 메소드입니다. 그러나 때로는 속성을 제거해야 하는 경우도 있습니다. 이 경우 attr()의 RemoveAttr() 메서드를 사용해야 합니다. 이 기사에서는 jQuery에서 속성을 동적으로 제거하는 방법을 소개합니다.

jQuery attr() 개요

동적으로 속성 제거를 소개하기 전에 jQuery의 attr() 함수를 검토해 보겠습니다. attr() 함수에는 DOM 요소의 속성 값을 가져오거나 설정하는 기능이 있습니다. 사용법은 다음과 같습니다.

// 获取属性值
$(selector).attr(attribute)
// 设置属性值
$(selector).attr(attribute,value)

로그인 후 복사

selector는 HTML 요소 또는 컬렉션을 지정하는 데 사용되는 선택자입니다. 요소의

selector

attribute 是一个属性名称字符串；
value 是一个属性值字符串或函数。

如果需要同时设置多个属性，可以使用对象作为参数，语法如下：

$(selector).attr({attribute1:value1, attribute2:value2, ...})

로그인 후 복사

jQuery removeAttr() 方法

removeAttr() 函数是 jQuery 中动态移除属性的函数，其语法为：

$(selector).removeAttr(attribute)

로그인 후 복사

其中，selector 和 attributeattribute는 속성 이름 문자열입니다.

value는 속성 값 문자열 또는 함수입니다.

동시에 여러 속성을 설정해야 하는 경우 개체를 매개변수로 사용할 수 있습니다. 구문은 다음과 같습니다.

$("input[type='button']").removeAttr("disabled");

로그인 후 복사

jQuery RemoveAttr() 메서드

`removeAttr()` 해당 함수는 jQuery에 있습니다. 속성을 동적으로 제거하는 함수의 구문은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery attr() 和 removeAttr() 实例</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").attr("style","background-color:yellow; font-size:24px;");
      });
      $("input[type='button']").click(function(){
        $("p").removeAttr("style");
      });
    });
  </script>
  <style>
    p {
      background-color: lightblue;
      font-size: 20px;
    }
  </style>
</head>
<body>

<h2>jQuery attr() 和 removeAttr() 实例</h2>

<p>点击第一个按钮将更改样式。</p>

<button>更改样式</button>
<input type="button" value="移除样式">

</body>
</html>

로그인 후 복사

그 중 selector와 attribute의 의미는 다음과 같습니다. attr() 함수에 있는 것입니다. RemoveAttr() 함수는 HTML 속성을 동적으로 제거하고 기본 상태로 되돌릴 수 있습니다.

예를 들어, 다음 코드를 사용하여 요소의 "disabled" 속성을 제거할 수 있습니다.

rrreee🎜removeAttr() 함수는 HTML 요소에 존재하는 속성만 제거할 수 있습니다. 요소에 CSS를 통해 설정되고 수정된 속성이 있는 경우 이 메서드는 수정된 속성 값을 제거할 수 없습니다. 🎜🎜jQuery attr() 및 RemoveAttr() 예제🎜🎜다음 예제에서는 attr() 및 RemoveAttr() 메서드를 사용하여 HTML 요소의 속성을 동적으로 수정합니다. 먼저 HTML 코드 조각을 만듭니다. 🎜rrreee🎜 이 텍스트 코드에서 최신 버전의 jQuery 라이브러리를 참조하고 버튼과 입력 상자가 포함된 HTML 페이지를 만듭니다. 사용자가 스타일 변경 버튼을 클릭하면

요소의 배경색이 노란색으로 변경되고 글꼴 크기가 24px로 변경됩니다. 사용자가 스타일 제거 버튼을 클릭하면

요소가 기본 상태로 되돌아갑니다. 이 두 버튼에 대한 이벤트 핸들러는 jQuery의 attr() 및 RemoveAttr() 메소드를 사용합니다. 물론 콘솔에서 이 두 가지 방법을 테스트할 수도 있습니다. 🎜

위 내용은 jQuery에서 속성을 동적으로 제거하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.