JQuery ( addClass(), removeClass(), css() )

FrontEnd/JQuery

by H_Develop 2022. 7. 12. 17:07

addClass() HTML 요소에 class 속성을 더함
removeClass() HTML 요소로부터 class 속성을 삭제
css() HTML 요소에 CSS속성을 설정하거나 속성 값을 가져옴

addClass()

<script src= "C:/js/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
    	$("#btn1").click(function() {
        	$("h2").addClass("red");
        });
        $("#btn2").click(function() {
        	$("p").addClass("blue");
		});
    });
</script>
<style>
	.red {background-color :red; color :white;}
    .blue {background-color : blue; color :white;}
</style>
</head>
<body>
	<h2>제목 1</h2>
    <p>단락 1</p>
    <h2>제목 2</h2>
    <p>단락 2</p>
    <button id="btn1">red 클레스 더하기</button>
    <button id="btn2">blue 클레스 더하기</button>
</body>

btn1 버튼을 통해 h2 태그에 red를 적용시키는데, style로 red를 css 설정해주어 작동하게 해준다.

<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
	<scrip>
    	$(finction() {
        	$("#title1").addClass("red");
            $("#title2").css("color","blue");
            $("#para").addClass("yellow");
        });
    </script>
    <style>
    	.yellow {background-color : yellow;}
        .red {color : red;}
    </style>
<body>
	<h3 id="title1">제목1</h3>
    <h3 id="title2">제목2</h3>
    <p id="para">단락이다.</p>
</body>

removeClass()

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(function() {
        	$("#btn").click(function() {
            	$("h2").removeClass("pink");
            });
        });
        $(document).ready(function() {
        	$("#btn1").click(function() {
            	$("p").removeClass("green");
            });
        });
    </script>
    <style>
    	.pink {background-color : pink; color : white;}
        .green {background-color : green; color : white;}
    </style>
</head>
<body>
	<h2 class="pink">제목 1</h2>
    <p class="green">단락 1</p>
    <h2 class="pink">제목 2</h2>
    <p class="green">단락 2</p>
    <button id="btn">pink 클레스 삭제하기</button>
    <button id="btn1">green 클레스 삭제하기</button>
</body>

Style 에 적용된 CSS 제거.

CSS()

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <script>
    	$(function() {
        	$("#btn").click(functioni() {
            	$("h2").css("background-color","yellow");
                $("h2").css("color","white");
            });
        });
    </script>
</head>
<body>
	<h2 class="pink">제목 1</h2>
    <h2 class="pink">제목 2</h2>
    <button id="btn">CSS 설정하기</button>
</body>

CSS() 괄호 안에 원하는 CSS를 설정하고 버튼을 통해 적용시킨다.

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
	<script>
    	$(functioin() {
        	$("#btn").click(function() {
            	var color = $("h2").css("background-color");
                var size = $("h2").css("font-size");
                alert(color + "\n" + size); // \n개행문자. <br>과 같다.
            });
        });
    </script>
</head>
<body>
	<h2 style="background-color : yellow; font-size : 30px;">제목</h2>
    <button id="btn">CSS 설정하기</button>
</body>

alert 출력 값
rgb(255,255,0)
30px

    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
</head>
    <script>
        $(function(){
            $("#div1").text("안녕하세요");
            $("#div2").addClass(function() {
                $("#div2").html("반갑습니다.");
                var bc = $("#div2").css("background-color","yellow");
            });
            $("#email").addClass(function() {
                $("#email").val("test@korea.com");
            });
        });
    </script>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <input type="text" id="email">
</body>

'FrontEnd > JQuery' 카테고리의 다른 글

parent(), find(), siblings() (0)	2022.07.12
JQuery Selector ( 기본 선택자, 필터 선택자, 전체 선택자 ) (0)	2022.07.12
JQuery Method( append(), prepend(), befor(), after(), remove() ) (0)	2022.07.11
JQuery Method ( text(), html(), val(), attr() ) (0)	2022.07.11
JQuery 개념 (0)	2022.07.11