괴발개발/Javascript+JQuery

JQ_길이 예제(inner,outer/Width,Height)

moonday 2021. 6. 23. 21:29

- width()/height() : 컨텐츠의 가로/세로 길이      
- innerWidth()/innerHeight() : 컨텐츠와 패딩을 합친 가로/세로 길이      
- outerWidth()/outerHeight() : 컨텐츠와 패딩과 테두리를 합친 가로/세로 길이      
- outerWidth(true)/outerHeight(true) : 컨텐츠와 패딩과 테두리와 마진을 합친 가로/세로 길이      
- width(숫자)/height(숫자) : 컨텐츠의 가로/세로 길이를 설정
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>길이 예제</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    $(function(){
      console.log('가로(컨텐츠) : ' + $('.box').width());
      console.log('가로(컨텐츠+패딩) : ' + $('.box').innerWidth());
      console.log('가로(컨텐츠+패딩+테두리) : ' + $('.box').outerWidth());
      console.log('가로(컨텐츠+패딩+테두리+마진) : ' + $('.box').outerWidth(true));
    })
  </script>
  <style>
    .box{
      margin: 20px; padding: 20px; border: 3px solid black;
      background: antiquewhite; width: 150px; height: 150px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
저작자표시

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JQ_자손 요소 탐색  (0) 2021.06.23
JQ_조상 탐색  (0) 2021.06.23
JQ_CSS메소드  (0) 2021.06.23
JQ_메뉴선택예제  (0) 2021.06.23
JQ_클래스 관련 메소드  (0) 2021.06.23

'괴발개발/Javascript+JQuery'의 다른글

  • 현재글JQ_길이 예제(inner,outer/Width,Height)

관련글

댓글

티스토리툴바