코드랩 레퍼런스

.width() 본문

JQUERY

.width()

webstoryboy 2017. 6. 4. 21:59
.width() 메서드는 선택한 요소의 가로를 설정하거나 반환합니다.

Definition

  • .width() 메서드는 선택한 요소의 width 값을 가져옵니다.
  • .width() 메서드는 선택한 요소의 width 값을 변경합니다.
  • .width() 메서드는 선택한 요소의 width 값과 함수를 설정합니다..

Syntax

$(selector).width();
$(selector).width(속성값);
$(selector).width(함수);

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.attr()

Sample 선택한 요소의 속성 값을 가져옵니다.

box의 크기는?
박스의 width = 0px
박스의 height = 0px
박스의 innerWidth = 0px
박스의 innerHeight = 0px
박스의 outerWidth = 0px
박스의 outerHeight = 0px
이 문서의 크기는 = 0px
이 브라우저의 크기는 = 0px
<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery) : attr()</title>
		<style>
			#box {
				border: 5px solid #ccc; padding:50px; margin:50px;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			box의 크기는?<br>
			<span>박스의 width = </span><span id="width">0</span>px<br>
			<span>박스의 height = </span><span id="height">0</span>px<br>
			<span>박스의 innerWidth = </span><span id="innerWidth">0</span>px<br>
			<span>박스의 innerHeight = </span><span id="innerHeight">0</span>px<br>
			<span>박스의 outerWidth = </span><span id="outerWidth">0</span>px<br>
			<span>박스의 outerHeight = </span><span id="outerHeight">0</span>px<br>
			<span>이 문서의 크기는 = </span><span id="document">0</span>px<br>
			<span>이 브라우저의 크기는 = </span><span id="window">0</span>px
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(window).resize(function(){
				$('#width').text($('#box').width());
				$('#height').text($('#box').height());
				$('#innerWidth').text($('#box').innerWidth());
				$('#innerHeight').text($('#box').innerHeight());
				$('#outerWidth').text($('#box').outerWidth());
				$('#outerHeight').text($('#box').outerHeight());
				$('#document').text($(document).width());
				$('#window').text($(window).width());
			});
			$(window).trigger('resize');
		</script>
	</body>
</html>  

Sample2 선택한 요소의 속성 값을 변경합니다.

box를 클릭하면 width 값이 줄어듭니다.
<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery) : attr()</title>
		<style>
			#box2 {
				border: 5px solid #ccc; padding:50px; margin:50px;
			}
		</style>
	</head>
	<body>
		
		<div id="box2">
			box를 클릭하면 width값이 줄어듭니다.<br>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
			var mWidth = $("#box").width();
			$("#box2").click(function() {
			  $(this).width(mWidth);
			  mWidth -= 100;
			});
		</script>
	</body>
</html>  

Ad

Comments