Comment définir la largeur d'un élément en javascript-js tutoriel-php.cn

Comment définir la largeur d'un élément en javascript

青灯夜游

Libérer： 2023-01-05 16:12:04

original

11255 Les gens l'ont consulté

Comment définir la largeur de l'élément en JavaScript : utilisez d'abord l'instruction "document.getElementById("id value")" pour obtenir l'objet élément ; puis utilisez l'instruction "element object.style.width="width value" Instruction "" pour définir la largeur de l'élément.

Comment définir la largeur d'un élément en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

javascript définit la largeur de l'élément

Principe :

Obtenir l'objet élément
L'attribut width de l'objet HTML DOM Style définit la largeur de l'élément.

Exemple de code :

<!DOCTYPE html>
<html>

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

	<body>
<img  id="img" src="img/1.jpg" / alt="Comment définir la largeur d'un élément en javascript" >

<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>

Copier après la connexion

Rendu :

Comment définir la largeur dun élément en javascript

Instructions :

La propriété width de l'objet Style peut définir la largeur de l'élément.

Syntaxe :

Object.style.width=auto|length|%

Copier après la connexion

值	描述
auto	默认。浏览器可计算出实际的宽度。
%	定义基于其包含块的百分比宽度。
length	使用 px、cm 等单位定义宽度。

Méthode pour trouver des éléments :

1. Obtenez des éléments en fonction de l'identifiant

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

Copier après la connexion

2. . Obtenez l'élément basé sur le nom de la balise

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

Copier après la connexion

3. Obtenez l'élément basé sur la valeur de l'attribut name

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

Copier après la connexion

4. Obtenez l'élément basé sur l'attribut de classe

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

Copier après la connexion

5. Obtenez l'élément en fonction du chemin CSS (Obtenez-en un)

document.querySelector("css路径");

Copier après la connexion

6. Obtenez les éléments selon le chemin CSS (obtenez un groupe)

document.querySelectorAll("css路径");

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!