Jquery - 속성 변경(2) : 스타일, textNode

 

 

1. 스타일 속성 변경

css("속성명")	css속성값을 가져오는 함수
css("속성명", "속성값")	css속성값에 속성값을 대입하는 함수
css({속성명 : 속성값, "속성명" : "속성값"...})	다수의 css속성을 설정하는 함수
css(속성명, function(i,v){return "속성값"})	로직에 의해 속성을 설정하는 함수

 

<div id="container3">
        <p>스타일 적용하기</p>
</div>
<button onclick="changeCss();">변경하기</button>
<button onclick="changeCssAll();">변경하기2</button>

 

<script>

        const changeCssAll=()=>{

            $("div#container3>p").css({
                border : "1px solid red",
                backgroundColor : "lime",
                fontSize : "25px",
                fontWeight:"bolder"
            });

        }

        const changeCss=()=>{

            $("div#container3>p").css("fontSize",function(i,v){
                const font=parseInt(v);
                return font+10+'px';
            })
        }

</script>

 

 

 

2. textNode데이터 수정하기

html()	innerHTML속성에 값을 넣는것과 동일 / 태그를 태그로 해석
text()	innerText속성에 값을 넣는것과 동일 / 태그를 문자로 해석

 

<div id="textcontainer"></div>
<button onclick="textHTML()">html()</button>
<button onclick="textText()">text()</button>

    <script>
        const textHTML=()=>{
            const str="<h3>이건 h3태그야</h3>";
            $("div#textcontainer").html(str);
            //매개변수가 없으면 innerHTML에 있는 값을 가져옴
            console.log($("div#textcontainer").html());
        }

        const textText=()=>{
            const str="<h3>이건 h3태그야</h3>";
            $("div#textcontainer").text(str);
            //매개변수가 없으면 innerText에 있는 값을 가져옴
            console.log($("div#textcontainer").text());
        }

    </script>