속성을 추가하는 방법 - .attr()

attr은 요소의 속성의 값을 가져오거나 속성을 추가합니다.
1 min read

.attr()

.attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.

 

기본형 1

.attr( attributeName )
  • 선택한 요소의 속성의 값을 가져옵니다.

예를 들어

$( 'div' ).attr( 'class' );

<div> 요소의 class 속성의 값을 가져옵니다.

 

기본형 2

.attr( attributeName, value )
  • 선택한 요소에 속성을 추가합니다.

예를 들어

$( 'h1' ).attr( 'title', 'Hello' );

<h1> 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다.

 

예제 1

<h1> 요소의 class 속성의 값을 가져와서 출력합니다.

<h1 class="hello">Lorem ipsum dolor.</h1>
<p>h1 class value is : <span></span></p>
$( document ).ready( function() {
  var hClass = $( 'h1' ).attr( 'class' );
  $( 'span' ).text( hClass );
});

 

예제 2

<input> 요소에 Input your address를 값으로 하는 placeholder 속성을 추가합니다.

<input type="text"/>
input {
  font-size: 30px;
}
$( document ).ready( function() {
  $( 'input' ).attr( 'placeholder', 'Input your address' );
});
같이 보면 좋은 글
  • 속성(attribute)을 제거하고 싶다면 .removeAttr()을 사용합니다.
  • 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 때는 .css()를 사용합니다.
  • .prop()는 자바스크립트 입장에서의 속성값을 가져오거나 추가합니다.

You may like these posts

  • CDN 이용하기 HTML에 다음 코드를 추가합니다. <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>   다운로드 받아 연결하기 jQuery 다운로드는…
  • .hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 효과를 넣을 수 있습니다.   기본형 .hover( handlerIn(eventObject), handlerOut(eventObject) ) ha…
  • 순서대로 요소를 나타내는 방법 .animate()를 이용하여 서서히 나타나게 만든 예제입니다. <button>Click to animate</button> <div class="box box-1">Hello!<…
  • .length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다.   예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <button>Cli…
  • jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다.   기본형 jQuery.inArray( value, array [, fromIndex ] ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다…
  • 자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. <li> 요소를 3개 이상 가진 <ol> 요소를 선택해서 글자를 빨간색으로 만듭니다. …

Post a Comment