[jQuery] 프로퍼티 설정 (.attr, removeAttr, .css)

2021. 8. 8. 00:54
728x90

01 .attr()

  • 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용.

 

 

 

속성 코드 같이 쓰기

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>태그 속성 제어</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            console.log($("a").attr("href"));
            $("a").attr({
                "href" : "https://www.google.co.kr",
                "target" : "_blank"
            });
        });
    </script>
</head>
<body>
    <a href="#">구글로 이동</a><br>
    <form action="">
        <input type="text" name="txt"><button>전송</button>
    </form>    
</body>
</html>

 

 

 

 

 

02 .removeArrt()

  • 선택한 요소에서 지정된 프로퍼티(property)를 제거.

 

 

 

$("input").attr("required","");
$("input").removeAttr("required");

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>태그 속성 제어</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //input 태그 required 속성을 추가   
            $("input").attr("required","");
            
            //input 태그 required 속성을 제거  
            $("input").removeAttr("required");
        });
    </script>
</head>
<body>
    <a href="#">구글로 이동</a><br>
    <form action="">
        <input type="text" name="txt"><button>전송</button>
    </form>    
</body>
</html>

 

 

 

 

 

03 .css()

  • 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정

 

 

 

선택한 요소 집합의  첫 번째 요소 의 스타일 속성값을 반환

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>css</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        p{
            background-color: cornflowerblue;
            font-size: 20px;
            color: white;
        }
        .back{
            background-color: black;
        }
    </style>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //css 함수에 css 속성만 넣으면 해당 속성 값을 읽어옴
            console.log($("p").css("background-color"));
        });
    </script>
</head>
<body>
    <p class="back">내용</p>
    <div class="back">내용</div>
</body>
</html>

 

 

 

해당 css 속성에 새 값을 지정

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>css</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        p{
            background-color: cornflowerblue;
            font-size: 20px;
            color: white;
        }
        .back{
            background-color: black;
        }
    </style>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //css 함수에 css 속성만 넣으면 해당 속성 값을 읽어옴
            console.log($("p").css("background-color"));

            //css(속성, 값) --> 해당 css 속성에 새 값을 지정
            $("p").css("background-color","red");
        });
    </script>
</head>
<body>
    <p class="back">내용</p>
    <div class="back">내용</div>
</body>
</html>

 

 

 

div 태그에 배경색을 skyblue로 지정하고 글자 크기를 20px 지정

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>css</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        p{
            background-color: cornflowerblue;
            font-size: 20px;
            color: white;
        }
        .back{
            background-color: black;
        }
    </style>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //css 함수에 css 속성만 넣으면 해당 속성 값을 읽어옴
            console.log($("p").css("background-color"));

            //css(속성, 값) --> 해당 css 속성에 새 값을 지정
            $("p").css("background-color","red");

            //div 태그에 배경색을 skyblue로 지정하고 글자 크기를 20px 지정
            var css_data = new Object();
            css_data['background-color'] = "skyblue";
            css_data['font-size'] = "30px";

            $("div").css(css_data);
        });
    </script>
</head>
<body>
    <p class="back">내용</p>
    <div class="back">내용</div>
</body>
</html>

 

    <script>
        $(function(){
            //div 태그에 배경색을 skyblue로 지정하고 글자 크기를 20px 지정
           
            var css_data = {
            	"background-color" : "skyblue",
            	"font-size" : "30px"
            };
            
            = (위 아래 같은 결과)
            
            var css_data = new Object();
            css_data['background-color'] = "skyblue";
            css_data['font-size'] = "30px";
            
            //
            
            $("div").css(css_data);
            
            = (위 아래 같은 결과)
            
            $("div").css({
            	"background-color" : "skyblue",
            	"font-size" : "30px"
            });
        });
    </script>

 

 

 

 

 

04 정리

 

메소드 설명
.attr()  선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나,
 선택한 요소의 지정된 속성을 전달받은 값으로 설정
.removeAttr()  선택한 요소에서 지정된 속성(attribute)을 제거
.prop()  선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나,
 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정
.removeProp()  선택한 요소에서 지정된 프로퍼티(property)를 제거
.css()  선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정
728x90

'jQuery > Study' 카테고리의 다른 글

[jQuery] 클래스 설정 (.addClass, .removeClass, .hasClass, .ToggleClass)  (0) 2021.08.11
[jQuery] getter 메소드와 setter 메소드 (.html, .text, .attr, .val)  (0) 2021.08.08
[jQuery] 필터링 메소드 (.eq, .slice)  (0) 2021.08.08
[jQuery] 제이쿼리 선택자 (:eq(n), :gt(n), :lt(n), :even, :odd, :first, :first-of-type, :last, :last-of-type, :nth-child(n), :only-child)  (0) 2021.08.08
[jQuery] 자손 요소의 탐색 (.children, .find)  (0) 2021.08.07

BELATED ARTICLES

more

티스토리툴바