[jQuery] 제이쿼리와 CSS

제이쿼리와 CSS

<script type="text/javascript">
    $("document").ready(function() {
        $("#setProp").click(function(evt) {
            $("#example p").css("text-decoration", "overline") //위에 라
                .css("font-size", "+=1pt") // 클릭시마다 폰트를 1씩 증
        });

        $("#setProps").click(function(evt) {
            $("#example p").css({
                "font-weight" : "bold",
                "color" : "red",
                "text-decoration" : "underline"
            })  // 빨간색 폰트 + 밑줄
        });

        $("#addCl").click(function(evt) {
            $("#example p").addClass("pClass");
        });

        $("#rmCl").click(function(evt) {
            $("#example p").removeClass("pClass");
        });

        $("#toggleCl").click(function(evt) {
            $("#example p").toggleClass("pClass");
        });
    });
</script>
<style>
    .pClass {
        color: green;
        text-transform: uppercase
    }
    
    button {
        margin: 5pt 5pt 0 0;
    }
</style>

 html은 아래와 같고

<div id="example">
    <p class="a">문장 1</p>
    <p id="para1">문장 2</p>
    <p class="b">문장 3</p>
    <p id="para4" lang="en-us">문장 4</p>
    <p id="para5" lang="en-gb">문장 sentence 5</p>        </div>
<button id="setProp">Set Property</button>
<button id="setProps">Set Properties</button>
<button id="addCl">Add Class</button>
<button id="rmCl">Remove Class</button>
<button id="toggleCl">Toggle Class</button>

각 스크립트의 결과물 입니다