Where The Streets Have No Name

jQuery 기본 예제 모음(6) : CSS 본문

Developement/Web

jQuery 기본 예제 모음(6) : CSS

highheat 2008. 4. 10. 19:34
출처 : http://apmusers.com/tt/dbckdghk/59

<CSS>

1. css( name )  Returns: String
css( name )  실행후 문자열 반환

Return a style property on the first matched element.
매치된 원소에서 주어진 스타일 속성이 발견되면 그 값을 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("div").click(function () {
     var color = $(this).css("background-color");
     $("#result").html("That div is <span style='color:" +
                        color + ";'>" + color + "</span>.");
   });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left; }
  </style>
</head>
<body>
  <span id="result"> </span>
  <div style="background-color:blue;"></div>
  <div style="background-color:rgb(15,99,30);"></div>
  <div style="background-color:#123456;"></div>
  <div style="background-color:#f11;"></div>
</body>
</html>


2. css( properties )  Returns: jQuery
css( properties )  실행후 jQuery 객체 반환

Set a key/value object as style properties to all matched elements.
매치되어진 모든 원소에 주어진 키와 값으로 이루어진 속성들의 배열의 스타일을 적용하고 객체를 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("p").hover(function () {
     $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
   }, function () {
     var cssObj = {
       "background-color": "#ddd",
       "font-weight": "",
       color: "rgb(0,40,244)"
     }
     $(this).css(cssObj);
   });

  });
  </script>
  <style>
  p { color:green; }
  </style>
</head>
<body>
  <p>
   Move the mouse over a paragraph.
  </p>
  <p>
   Like this one or the one above.
  </p>
</body>
</html>



3. css( name, value )  Returns: jQuery
css( name, value )  실행후 jQuery 객체 반환

Set a single style property to a value on all matched elements.
하나의 속성과 값을 받아 매치되어진 모든 원소에 적용

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("p").mouseover(function () {
     $(this).css("color","red");
   });

  });
  </script>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
</head>
<body>
  <p>
   Just roll the mouse over me.
  </p>
  <p>
   Or me to see a color change.
  </p>
</body>
</html>



4. offset( )  Returns: Object{top,left}
offset( )  실행후 탑과 레프트에 해당하는 위치 정보를 반환

Get the current offset of the first matched element relative to the viewport.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
  });
  </script>
  <style>
  p { margin-left:10px; }
  </style>
</head>
<body>
  <p>Hello</p><p>2nd Paragraph</p>
</body>
</html>



5. height( )  Returns: Integer
height( )  실행후 정수형을 반환한다.

Get the current computed, pixel, height of the first matched element.
매치된 첫번째 원소의 높이를 픽셀로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   function showHeight(ele, h) {
     $("div").text("The height for the " + ele +
                   " is " + h + "px.");
   }
   $("#getp").click(function () {
     showHeight("paragraph", $("p").height());
   });
   $("#getd").click(function () {
     showHeight("document", $(document).height());
   });
   $("#getw").click(function () {
     showHeight("window", $(window).height());
   });

  });
  </script>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>
  <div> </div>
  <p>
   Sample paragraph to test height
  </p>
</body>
</html>



6. height( val )  Returns: jQuery
height( val )  실행후 jQuery 객체 반환

Set the CSS height of every matched element.
매치되는 모든 원소에 주어진 높이를 적용한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("div").one('click', function () {
     $(this).height(30)
            .css({cursor:"auto", backgroundColor:"green"});
   });

  });
  </script>
  <style>
  div { width:50px; height:70px; float:left; margin:5px;
       background:rgb(255,140,0); cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



7. width( )  Returns: Integer
width( )  실행후 정수형을 반환

Get the current computed, pixel, width of the first matched element.
매치되는 첫번째 원소의 너비를 픽셀로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   function showWidth(ele, w) {
     $("div").text("The width for the " + ele +
                   " is " + w + "px.");
   }
   $("#getp").click(function () {
     showWidth("paragraph", $("p").width());
   });
   $("#getd").click(function () {
     showWidth("document", $(document).width());
   });
   $("#getw").click(function () {
     showWidth("window", $(window).width());
   });

  });
  </script>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
  </style>
</head>
<body>
  <button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>
  <button id="getw">Get Window Width</button>
  <div> </div>
  <p>
   Sample paragraph to test width
  </p>
</body>
</html>

8. width( val )  Returns: jQuery
width( val )  실행후 jQuery 객체를 반환

Set the CSS width of every matched element.
매치되는 모든 원소에 주어진 너비를 적용한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("div").one('click', function () {
     $(this).width(30)
            .css({cursor:"auto", "background-color":"blue"});
   });

  });
  </script>
  <style>
  div { width:70px; height:50px; float:left; margin:5px;
       background:red; cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>
'Developement/Web' Related Articles more