jquery는 상자 크기를 설정합니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery는 상자 크기를 설정합니다.

PHPz

May 28, 2023 am 09:26 AM

프론트엔드 웹 개발에서 페이지 레이아웃 디자인은 매우 중요한 작업입니다. 그 중 상자는 페이지 레이아웃의 기초이며 상자의 크기와 스타일은 페이지의 전반적인 효과와 사용자 경험에 매우 중요합니다. 이 기사에서는 jQuery를 사용하여 상자 크기를 설정하여 적응형 및 고정 크기 효과를 얻는 방법을 소개합니다.

1. jQuery로 상자 크기 가져오기

상자 크기를 설정하기 전에 먼저 상자 크기를 가져와야 합니다. jQuery는 width(), height(), externalWidth(), externalHeight(), innerWidth(), innerHeight() 등을 포함하여 상자의 크기를 얻는 여러 가지 메서드를 제공합니다.

width() 및 height() 메서드

width() 및 height() 메서드는 각각 요소의 너비와 높이를 얻는 데 사용됩니다. 이 두 메소드는 패딩, 테두리 및 여백을 제외한 요소 콘텐츠 영역의 너비와 높이를 반환합니다.

샘플 코드:

$(document).ready(function() {
  var boxWidth = $('#box').width();
  var boxHeight = $('#box').height();
  console.log('boxWidth:' + boxWidth + ', boxHeight:' + boxHeight);
});

로그인 후 복사

outerWidth() 및 externalHeight() 메서드

outerWidth() 및 externalHeight() 메서드는 각각 요소의 외부 너비와 외부 높이를 얻는 데 사용됩니다. 이 두 메서드는 요소 콘텐츠 영역의 전체 너비와 높이에 패딩, 테두리, 여백을 더한 값을 반환합니다.

샘플 코드:

$(document).ready(function() {
  var boxOuterWidth = $('#box').outerWidth();
  var boxOuterHeight = $('#box').outerHeight();
  console.log('boxOuterWidth:' + boxOuterWidth + ', boxOuterHeight:' + boxOuterHeight);
});

로그인 후 복사

innerWidth() 및 innerHeight() 메서드

innerWidth() 및 innerHeight() 메서드는 각각 요소의 내부 너비와 내부 높이를 얻는 데 사용됩니다. 이 두 메서드는 테두리와 여백을 제외하고 요소의 콘텐츠 영역에 패딩을 더한 총 너비와 높이를 반환합니다.

샘플 코드:

$(document).ready(function() {
  var boxInnerWidth = $('#box').innerWidth();
  var boxInnerHeight = $('#box').innerHeight();
  console.log('boxInnerWidth:' + boxInnerWidth + ', boxInnerHeight:' + boxInnerHeight);
});

로그인 후 복사

2. jQuery를 사용하여 상자 크기 설정

상자 크기를 가져온 후 jQuery를 사용하여 상자 크기를 동적으로 설정할 수 있습니다. jQuery는 width(), height(), externalWidth(), externalHeight(), innerWidth(), innerHeight() 등을 포함하여 상자 크기를 설정하는 다양한 메서드를 제공합니다.

width() 및 height() 메서드

width() 및 height() 메서드는 요소의 너비와 높이를 각각 설정하는 데 사용됩니다. 두 방법 모두 요소의 너비와 높이를 지정하는 숫자 매개변수를 허용합니다. 적응형 효과를 얻기 위해 백분율을 매개변수로 사용할 수도 있습니다.

샘플 코드:

$(document).ready(function() {
  // 设置固定宽度和高度
  $('#box').width(200).height(100);

  // 设置自适应宽度和高度
  $('#box').width('50%').height('50%');
});

로그인 후 복사

outerWidth() 및 externalHeight() 메서드

outerWidth() 및 externalHeight() 메서드는 각각 요소의 외부 너비와 외부 높이를 설정하는 데 사용됩니다. 이 두 메서드는 패딩, 테두리 및 여백을 포함할지 여부를 지정하는 부울 매개 변수를 허용합니다. 적응형 효과를 얻기 위해 백분율을 매개변수로 사용할 수도 있습니다.

샘플 코드:

$(document).ready(function() {
  // 设置固定外宽度和外高度
  $('#box').outerWidth(300, true).outerHeight(150, true);

  // 设置自适应外宽度和外高度
  $('#box').outerWidth('50%', true).outerHeight('50%', true);
});

로그인 후 복사

innerWidth() 및 innerHeight() 메서드

innerWidth() 및 innerHeight() 메서드는 각각 요소의 내부 너비와 내부 높이를 설정하는 데 사용됩니다. 두 방법 모두 요소의 내부 너비와 높이를 지정하는 숫자 매개변수를 허용합니다. 적응형 효과를 얻기 위해 백분율을 매개변수로 사용할 수도 있습니다.

샘플 코드:

$(document).ready(function() {
  // 设置固定内宽度和内高度
  $('#box').innerWidth(260).innerHeight(110);

  // 设置自适应内宽度和内高度
  $('#box').innerWidth('50%').innerHeight('50%');
});

로그인 후 복사

3. 적응형 및 고정 크기 구현

실제 개발에서는 페이지 레이아웃이 다르면 상자 크기 설정 방법도 달라야 합니다. 일반적으로 적응형 크기는 반응형 레이아웃에 적합하고 고정 크기는 정적 레이아웃에 적합합니다. 다음은 jQuery를 사용하여 적응형 및 고정 크기 효과를 얻는 방법을 설명합니다.

적응형 크기 구현

적응형 크기는 일반적으로 브라우저 창 크기에 따라 반응형 레이아웃을 구현하기 위해 백분율을 매개변수로 사용합니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自适应大小的实现</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #box {
      background-color: #ccc;
      width: 50%;
      height: 50%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(window).resize(function() {
        $('#box').innerWidth('50%').innerHeight('50%');
      });
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드에서 CSS 스타일은 상자의 크기를 설정하는 데 사용되었으며 jQuery에서는 innerWidth() 및 innerHeight() 메서드를 사용하여 적응형 크기를 구현했습니다. 브라우저 창 크기가 변경되면 jQuery는 창 크기의 변화를 감지하고 상자 크기를 다시 계산합니다.

고정 크기 구현

고정 크기는 일반적으로 디자인 초안을 기반으로 정적 레이아웃을 구현하기 위해 픽셀 값을 매개변수로 사용합니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>固定大小的实现</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #box {
      background-color: #ccc;
      width: 300px;
      height: 150px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#box').width(200).height(100);
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드에서 CSS 스타일은 상자의 크기를 설정하는 데 사용되며 jQuery에서는 width() 및 height() 메서드를 사용하여 고정된 크기를 구현합니다. jQuery의 Ready 이벤트에서 상자 크기를 200px×100px로 설정합니다.

요약하자면, 이 글에서는 상자 크기 가져오기 및 상자 크기 설정을 포함하여 jQuery를 사용하여 상자 크기를 설정하는 방법과 적응형 및 고정 크기 효과를 얻는 방법을 소개합니다. 이 글이 프론트엔드 웹 개발을 처음 시작하는 분들에게 도움이 되기를 바랍니다.

위 내용은 jquery는 상자 크기를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.