티스토리 뷰

HMLT&CSS&JS/jQuery

jQuery css 크기 측정

turfrain 2013. 8. 9. 18:00

- jQuery css 크기 측정

window 와 document 객체는 지원하지 않습니다.  width, height 사용.

 method

 설명

.outerWidth(true | false)

 기본값(false) padding+border , (true) padding+border+margin

.outerHeight(true | false)

 기본값(false) padding+border , (true) padding+border+margin



<!DOCTYPE html>

<html>

<head>

 <style>

 p{

  width : 200px;

height: 100px;

  margin: 10px;    

padding:5px;   

border:2px

solid #666;

}

 </style>

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

</head>

<body>

 <p>Hello</p>

 <p id="outWidth"></p>

 <p id="outHeight"></p>

<script>var p = $("p:first");

$("#outWidth").text( "outerWidth:" + $("#outWidth").outerWidth()+ " , outerWidth(true):" + $("#outWidth").outerWidth(true) );

$("#outHeight").text( "outerHeight:" + $("#outHeight").outerHeight()+ " , outerHeight(true):" + $("#outHeight").outerHeight(true) );


</script>


</body>

</html>


// outerWidth:214 , outerWidth(true):234

// outerHeight:114 , outerHeight(true):134





저작자표시 비영리

'HMLT&CSS&JS > jQuery' 카테고리의 다른 글

[텍스트 글자수 제한]  (0) 2017.10.17
# 특정위치로 스크롤 ( scrollTop )  (0) 2015.04.22
# jQuery 회전  (0) 2013.08.07
# chapter06 객체지향 프로그래밍  (0) 2013.02.04
# chapter17 효과  (0) 2012.12.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday