jQuery.width() 함수에 대한 자세한 설명

width() 함수는 현재 일치하는 요소의 너비를 설정하거나 반환하는 데 사용됩니다.

이 너비 값에는 요소의 margins(여백), 내부 여백(패딩), 테두리 등의 너비가 포함되지 않습니다. 아래와 같이:

jQuery-width-schematic-diagram.png

다른 부분을 포함한 너비를 얻으려면 innerWidth() 및 externalWidth()를 사용하십시오. 여기를 클릭하면 세 가지의 차이점을 확인할 수 있습니다.

이 함수는 jQuery 객체(인스턴스)에 속하며 보이지 않는 요소에도 여전히 유효합니다.

Syntax

jQueryObject.width( [ value ] )

참고:

1 value 매개변수를 생략하면 너비를 가져오는 것을 의미하고, 이 매개변수를 지정하면 너비를 설정한다는 의미입니다.

2. width() 함수의 "설정" 작업은 현재 jQuery 개체와 일치하는 각 요소를 대상으로 합니다. "읽기" 작업은 첫 번째 일치 요소만 대상으로 합니다.

Parameter

매개변수 설명

value 너비 값을 설정하는 데 사용되는 옵션/숫자 유형입니다.

jQuery 1.4.1 새로운 지원: 매개변수 값은 함수일 수 있으며, width()는 일치하는 모든 요소를 ​​기반으로 함수를 탐색하고 실행하며, 함수의 이 요소는 해당 DOM 요소를 가리킵니다.

width()는 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 현재 요소의 인덱스이고 두 번째 매개변수는 요소의 현재 너비 값입니다. 함수의 반환 값은 설정해야 하는 너비 값입니다.

반환 값

width() 함수의 반환 값은 jQuery/Number 유형입니다. 반환 값의 유형은 width() 함수가 현재 "설정" 작업을 수행하는지 아니면 "읽기" 작업을 수행하는지에 따라 다릅니다. .

width() 함수가 "설정" 작업을 수행하는 경우 현재 jQuery 객체 자체를 반환하고, "읽기" 작업인 경우 첫 번째로 일치하는 요소의 너비 값을 반환합니다.

현재 jQuery 객체가 여러 요소와 일치하는 경우 너비를 반환할 때 width() 함수는 첫 번째로 일치하는 요소만 사용합니다. 일치하는 요소가 없으면 null이 반환됩니다.

예제 및 설명

width() 함수는 width()의 너비 값에 단위가 없다는 점(단위는 픽셀)을 제외하면 CSS("너비")와 유사합니다.

$(element).width(); // 返回数字，例如：80
$(element).css("width"); // 返回字符串，例如："80px"

다음 HTML 코드를 예로 들어보세요.

<div id="n1" style="padding: 10px; width: 100px; height:100px; background: #eee;"></div>
<div id="n2" style="width: 200px; height:100px; background: #999;"></div>

다음 jQuery 샘플 코드는 width() 함수의 구체적인 사용법을 보여주는 데 사용됩니다.

var $n1 = $("#n1");
var $n2 = $("#n2");
document.writeln( $n1.width() ); // 100
document.writeln( $n2.width() ); // 200
var $divs = $("div");
// 如果匹配多个元素，只返回第一个元素的width
document.writeln( $divs.width() ); // 100
// 设置所有div元素的width不能小于300px(小于300的设为300，其它保持不变)
$divs.width( function(index, width){
    return Math.max(width, 300);
} );
// 设置n1的width为20px
$n1.width( 20 );

위 내용은 jQuery.width() 함수에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!