SoloLearn jQuery 번역

Dimensions

크기

• The width() and height() methods can be used to get and set the width and height of HTML elements.
  • width()와 height() 메소드는, HTML element의 너비와 높이를 가져오고 설정하는 데 사용할 수 있다.

$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);

코드 실행 확인

• The width() and height() methods get and set the dimensions without the padding, borders and margins.
  • width()와 height() 메소드는 padding, border, margin 없이 크기를 가져오고 설정한다.
• The innerWidth() and innerHeight() methods also include the padding.
  • innerWidth()와 innerHeight() 메소드에는 padding이 포함된다.
• The outerWidth() and outerHeight() methods include the padding and borders.
  • outerWidth()와 outerHeight() 메소드는 padding과 border가 포함된다.

• For example:

QUIZ

• Fill in the blanks to set the height of the paragraph with the id=”demo” to 68px.
  • id=”demo” p 태그의 높이를 68px로 설정해라.

$("#demo").height(68);

• What is the output of this code?
  • 아래 코드의 출력은 무엇인가?

<div style="width:200px"></div>

<script>
  $(function() {
    $("div").css("padding", "5px");
    alert($("div").innerWidth());
  });
</script>

210