자바스크립트에서 요소 너비를 설정하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 요소 너비를 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:12:04

원래의

11183명이 탐색했습니다.

JavaScript에서 요소의 너비를 설정하는 방법: 먼저 "document.getElementById("id value")" 문을 사용하여 요소 개체를 가져온 다음 "element object.style.width="width value""를 사용합니다. 요소의 너비를 설정하는 명령문입니다.

자바스크립트에서 요소 너비를 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript는 요소의 너비를 설정합니다

원리:

요소 개체 가져오기
HTML DOM 스타일 개체의 너비 속성은 요소의 너비를 설정합니다.

코드 예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			img {
				width: 200px;
			}
		</style>
	</head>

	<body>
<img  id="img" src="img/1.jpg" / alt="자바스크립트에서 요소 너비를 설정하는 방법" >

<p id="demo">img图片宽度为200px。</p>

<button onclick="myFunction()">设置img图片的宽度</button>

<script>
	function myFunction() {
		document.getElementById("img").style.width="300px";
		document.getElementById("demo").innerHTML="img图片宽度为300px。";
	}
</script>
	</body>

</html>

로그인 후 복사

Rendering:

자바스크립트에서 요소 너비를 설정하는 방법

설명:

Style 개체의 너비 속성은 요소의 너비를 설정할 수 있습니다.

구문:

Object.style.width=auto|length|%

로그인 후 복사

값	설명
auto	default. 브라우저는 실제 너비를 계산할 수 있습니다.
%	은 포함 블록의 백분율을 기준으로 너비를 정의합니다.
length	px, cm 및 기타 단위를 사용하여 너비를 정의하세요.

요소를 찾는 방법:

1. id

document.getElementById("id属性的值");

로그인 후 복사

2를 기준으로 요소를 가져옵니다.

document.getElementsByTagName("标签的名字");

로그인 후 복사

3. name 속성

document.getElementsByName("name属性的值");

로그인 후 복사

4. 클래스 속성을 기반으로 요소 가져오기

document.getElementsByClassName("类样式的名字");

로그인 후 복사

5. CSS 경로에 따라 요소 가져오기(하나 가져오기)

document.querySelector("css路径");

로그인 후 복사

6 CSS 경로에 따라 요소 가져오기(그룹 가져오기)

document.querySelectorAll("css路径");

로그인 후 복사

[권장] 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 요소 너비를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!