본문 바로가기

강좌/jQuery

jQuery Attributes(jQuery로 요소의 속성 변경하기) - 1





<예제로 이해하기>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

<meta http-equiv="content-type" content="text/html;" charset="utf-8" >

        <title> jquery </title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<script>

   $(document).ready(function (){

   //myLayer2, 3에 title속성 주기

   $('div.myLayer2, div.myLayer3').each(function(index){

this.title="동적으로 타이틀 부여하기"; //this.속성에 의해서 특정 속성값 변경

$(this).attr('title','attr()로 타이틀 주기');

});

//myLayer3에 여러가지 속성을 부여하기


//1개속성

/*

$('div.myLayer3').attr('title','3번째 레이어'); 

*/

//하나이상 속성

/*

$('div.myLayer3').attr({

   title:'JSON을 사용한 레이어', 

style:'border:1px solid blue;background-color:yellow;'

});

*/

/*css를 사용한 변경*/

$('div.myLayer3')

 .attr({title:'JSON을 사용한 레이어'})

 .css("border","1px solid blue")

 .css("background-color","red");

});

</script>

    </head>


    <body>

   <div class="myLayer1" title="여기는 red영역 입니다">Red 영역</div>

   <div class="myLayer2">Green 영역</div>

   <div class="myLayer3">Blue 영역</div>

</body>

</html>