-
[jQuery] 18. dimension - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:25
jQuery - Dimensions
1. jQuery Dimension Methods
jQuery는 면적을 작업하기 위한 중요한 여러가지 메소드를 가지고 있습니다:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
2. jQuery Dimensions
[ 출처: W3Schools ]
3. jQuery width() and height() Methods
width() 메소드는 요소의 너비(width)를 설정하거나 반환합니다.
height() 메소드는 요소의 높이(height)를 설정하고나 반환합니다.
아래 예제는 div 요소의 너비와 높이를 반환하는 예제입니다.
1234567$("button").click(function(){var txt = "";txt += "Width: " + $("#div1").width() + "</br>";txt += "Height: " + $("#div1").height();$("#div1").html(txt);});cs 4. jQuery innerWidth() and innerHeight() Methods
innerWidth() 메소드는 요소의 너비를 반환합니다.(padding 포함하여)
innerHeight() 메소드는 요소의 높이를 반환합니다.(padding 포함하여)
123456789101112131415161718192021222324252627282930<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height() + "</br>";txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";txt += "Inner height of div: " + $("#div1").innerHeight();$("#div1").html(txt);});});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>Display dimensions of div</button><p>innerWidth() - returns the width of an element (includes padding).</p><p>innerHeight() - returns the height of an element (includes padding).</p></body></html>cs 5. jQuery outerWidth() and outerHeight() MethodsouterWidth() 메소드는 요소의 너비를 반환합니다.(padding과 border 포함하여)outerHeight() 메소드는 요소의 높이를 반환합니다.(padding과 border 포함하여)1234567$("button").click(function(){var txt = "";txt += "Outer width: " + $("#div1").outerWidth() + "</br>";txt += "Outer height: " + $("#div1").outerHeight();$("#div1").html(txt);});cs outerWidth(true) 메소드는 요소의 너비를 반환합니다.(padding, border, margin 포함하여)
outerHeight(true) 메소드는 요소의 높이를 반환합니다.(padding, border, margin 포함하여)
6. jQuery More width() and height()
아래 예제는 문서와 윈도우의 너비와 높이를 반환하는 예제입니다.
123456789101112131415161718192021222324<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Document width/height: " + $(document).width();txt += "x" + $(document).height() + "\n";txt += "Window width/height: " + $(window).width();txt += "x" + $(window).height();alert(txt);});});</script></head><body><button>Display dimensions of document and window</button></body></html>cs 'Web > jQuery' 카테고리의 다른 글
[jQuery] 21. Descendants - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 20. Ancestors - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 19. Traversing - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 17. CSS() - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 16. CSS Classes - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 15. Remove - jQuery 강좌 jQuery / CSE (0) 2015.06.13
