SW/JavaScript

Java Script, jQuery : element 크기 변경 : 방법, 예제, 구현

얇은생각 2020. 5. 29. 19:30
반응형

Java Script, jQuery : element 크기 변경 : 방법, 예제, 구현

 

jQuery를 사용하여 요소의 크기를 변경하는 경우 크기를 변경하는 데 사용할 수 있는 두 가지 방법이 있습니다. 먼저 첫 번째 매개 변수를 높이 또는 너비로 전달하고, 두 번째 매개 변수를 값이 되는 .css() 방법을 사용할 수 있습니다.

 

$('.element').css('height', new_height_value);

$('.element').css('width', new_width_value);

 

 

 

다른 옵션은 .height() 메서드와 .width() 메서드를 사용하는 것입니다.

 

$('.element').height(new_height_value);

$('.element').width(new_width_value);

 

 

 

이 기사에서는 이 두 가지 방법의 차이를 살펴보겠습니다. height() method와 .css('height', val) method의 차이는 height() method이 요소의 패딩, 테두리 및 여백을 계산하여 요소의 높이를 설정하는 것입니다. css() 메서드는 height CSS 속성을 변경하기만 하면 됩니다. 패딩, 테두리 및 크기가 있는 요소가 있는 경우입니다.

 

<style>
.element
{
    border: 5px solid #a1a1a1;
    padding: 40px;

    height: 200px;
    width: 400px;
}
</style>

<div class="element"></div>



 

.css() method을 사용하면 높이와 너비가 요소에 추가됩니다.

 

 

<script>
$('#preview_css').css('height', 300);
$('#preview_css').css('width', 300);
</script>

<div class="element" style="height: 300px; width: 300px;"></div>

 

 

 

 

.height() 및 .width() method를 사용하여 요소의 패딩, 테두리 및 여백을 계산하고 높이에 추가하여 요소의 높이가 정의된 값인지 확인합니다.

 

<script>
$('#preview_css').height(300);
$('#preview_css').width(300);
</script>

<div class="element" style="height: 390px; width: 390px;"></div>
반응형