Jam's story

[JQuery] css 조작 방법 본문

WEB/JQuery

[JQuery] css 조작 방법

애플쩀 2022. 6. 13. 15:57
 [jquery로 css 조작 방법]
    ㄱ.css()
    ㄴ.addClass() - 추가 
    ㄷ.removeClass() -제거
    ㄹ.toggleClass()  -선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 15:49:10</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .blue{
        color:blue;
    }
    .important{
        font-weight: bold;
        font-size: xx-large;
    }
</style>
</head>
<body>
<h3>ex05.html</h3>
<pre>
    [jquery로 css 조작 방법]
    ㄱ.css()
    ㄴ.addClass()
    ㄷ.removeClass()
    ㄹ.toggleClass()
    ㅁ.
</pre>
<h1>Lorem, ipsum dolor.</h1>
<h1>Distinctio, esse labore.</h1>
<p>Lorem, ipsum dolor.</p>
<p>Incidunt, tempora quasi!</p>
<p>Ipsum, obcaecati mollitia.</p>
<div>Lorem, ipsum dolor.</div>
<button>add Class</button>
<script>
    $("button").click(function(){
      //  $("h1").css("color","red");
    //$("h1, h2, p").addClass("blue");
    $("p").removeClass("blue");
    $("h1").toggleClass("important");
    });
</script>
</body>
</html>
저작자표시

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

[JQuery] event.preventDefault() - 링크이동안함  (0) 2022.06.13
[JQuery] 요소 넓이, 높이  (0) 2022.06.13
[JQuery] 동적으로 태그 만들기 , 속성가져오기, 요소 추가, contents 가져오기  (0) 2022.06.13
[JQuery] 애니메이션 중지  (0) 2022.06.13
[JQuery] selector 선택자  (0) 2022.06.13
'WEB/JQuery' Related Articles more
Comments