jineecode

attr method 본문

JS/jquery

attr method

지니코딩 2020. 12. 14. 11:55

attr method

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Method</title>
    <!-- jquery framework cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="method.js"></script>
    <style>
      div {
        width: 200px;
        height: 100px;
      }

      div.green {
        background: green;
      }

      div.red {
        background: red;
      }
    </style>
  </head>
  <body>
    <button class="btn1">click1</button>
    <button class="btn2">click2</button>
    <div class="green"></div>
  </body>
</html>

 

$(function(){ 
	let attr = $("div").attr("class");
	//  "green"
});

 

2. 파라미터가 2개이면, 1번 파라미터 속성을 2번 파라미터 값으로 변경합니다.

 

$(function(){
  let attr = $("div").attr("class","red");
});

html의 "div class" 가 "red"로 바뀐다

<div class="red"></div>

 

문법

$(selector).attr(attribute, value);

 

과제:

click1 버튼을 클릭하면 

green div 박스가

 

click2 버튼을 클릭하면

red div 박스가 나오게 해보자

더보기 
$(function){
	$(".btn1").click(function(){
    $("div") .attr("class", "green");
  });

   $(".btn2").click(function(){
   $("div").attr("class", "red");
 });
}

 

더 간단하게 코드를 짤 순 없을까?

버튼을 눌렀을 때 변수를 저장하고 변수를 이용해 div class에 넣는 건 어떨까?

 

html 코드 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Method</title>

    <!-- jquery framework cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="method.js"></script>

    <style>
      div {
        width: 200px;
        height: 100px;
      }

      div.green {
        background: green;
      }

      div.red {
        background: red;
      }
    </style>
  </head>
  <body>
    <button class="green">click1</button>
    <button class="red">click2</button>
    <div></div>
  </body>
</html>

 

js 코드 

$(function(){
 
   $("button").click(function(){
     let color = $(this).attr("class");
     console.log(color);
     $("div").attr("class", color);
   })
});

 

 

'JS > jquery' 카테고리의 다른 글

animate  (0) 2020.12.14
event  (0) 2020.12.14
스크롤시 해당 섹션의 메뉴를 활성화 시키기(jquery편)  (0) 2020.12.11
요소의 위치 .offset() .position()  (0) 2020.12.11
display를 변경시키는 메서드  (0) 2020.12.03
'JS/jquery' Related Articles more
Comments