목차
width 예제 - <button> 요소의 너비 설정 width 정의 width 구문 width 예제 - <div> 요소의 너비 변경 width 예제 - <img> 요소의 너비/높이 변경 width 예제 - <img> 요소의 너비 반환 width 예제 - 클릭 시 이미지 크기 2배씩 증가 / 더블 클릭 시 초기화
width 예제 - <button> 요소의 너비 설정
<button type="button" id="hz" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.width = "200px";
}
</script>
결과보기
width 정의
요소 너비 설정/반환.
1.
(블럭요소, 인라인블럭요소, position:absolute인 요소, position:fixed인 요소)에만 적용.
2.
요소의 width 범위 넘는 내용은 overflow 속성으로 제어.
3.
height 속성: 요소 높이 설정/반환.
4.
기본값: auto
반환값: 요소 너비 표시 문자열
CSS속성: width
CSS버전: CSS1
모든 브라우저 지원.
width 구문
요소 너비 반환 (★ 주의: 내부스타일로 지정된 경우에만 반환)
object .style.width
요소 너비 설정
object .style.width = "속성값"
[속성값]
auto
브라우저가 너비를 설정. (기본값)
length
너비를 길이 단위로 정의. (px단위, cm단위 등)
%
부모 요소 너비의 %
initial
이 속성의 기본값으로 설정
inherit
부모 요소의 속성값 상속
width 예제 - <div> 요소의 너비 변경
<style>
#hz {
width: 100px;
height: 100px;
background-color: tomato;
color: white;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.width = "500px";
}
</script>
결과보기
width 예제 - <img> 요소의 너비/높이 변경
<img id="hz" src="https://i.imgur.com/WfW5mBC.png" width="185" height="39">
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.height = "300px";
document.getElementById("hz").style.width = "300px";
}
</script>
결과보기 (※ 비율계산기 )
width 예제 - <img> 요소의 너비 반환
<img id="hz" src="https://i.imgur.com/WfW5mBC.png" style="width:185px;height:39px;" >
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.getElementById("hz").style.width);
}
</script>
결과보기 (※ 결과값: 185px)
PS. 주의: 태그 속성값 형태이거나 내부/외부 스타일로 지정된 경우엔 반환 X
width 예제 - 클릭 시 이미지 크기 2배씩 증가 / 더블 클릭 시 초기화
<img id="hz" src="https://i.imgur.com/PQNhCln.gif" height="50" width="50" onClick="imgSizeX2()" ondblclick="imgSizeX1()" title='클릭하면 2배 사이즈, 더블클릭하면 초기화'>
<script>
// 이미지 크기 초기화
function imgSizeX1() {
var img = document.getElementById('hz');
w = img.width;
h = img.height;
img.width = 50
img.height = 50;
}
// 이미지 크기 2배 증가
function imgSizeX2() {
var img = document.getElementById('hz');
w = img.width;
h = img.height;
img.width = w * 2;
img.height = h * 2;
}
</script>
결과보기
