Jam's story

[JQuery] 스타일 변경 본문

WEB/JQuery

[JQuery] 스타일 변경

애플쩀 2022. 5. 27. 15:21 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
    <title>Document</title>
</head>
<body>
    
    <pre>
        스타일 변경 버튼을 클릭하면 demo라는 아이디의 p태그의 스타일 속성을
         글자색 빨강 
         글크기 35px
         테두리 1px solid gray 변경 
    </pre>
    <button>스타일변경</button>
    <p id="demo">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur labore suscipit et debitis dignissimos impedit qui, minima perspiciatis delectus eaque atque quos ratione praesentium non. Tempore quasi dolor architecto. Beatae.
    </p>
    <script>
      $("button").click(function(event){
     /*    $("#demo").css("color","red");
        $("#demo").css("font-size","35px");
        $("#demo").css("border","1px solid gray");
 */
       /*  $("#demo")
        .css("color","red")
        .css("font-size","35px")
        .css("border","1px solid gray"); */

        $("#demo").css({
            "color":"red",
            "font-size":"35px",
            "border":"1px solid gray"
        });
      });
    </script>
</body>
</html>

 

저작자표시 (새창열림)

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

[JQuery] 만나이 계산  (0) 2022.06.02
[JQuery] select 모두 옮기기 ,하나만 옮기기  (0) 2022.06.02
[JQuery] 버튼 누르면 동작 -전구에 불 끄고 키기  (0) 2022.05.27
[JQuery] 의사클래스 풍선도움말  (0) 2022.05.24
[JQuery] 누르면 보이고 사라지고  (0) 2022.05.23
'WEB/JQuery' Related Articles more
Comments