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

Comment définir la largeur et la hauteur des éléments en JavaScript : 1. Obtenez la largeur et la hauteur de l'élément html ; 2. Définissez la largeur et la hauteur de l'élément via "main.style.width" et "main.style. hauteur".

L'environnement d'exploitation de cet article : système windows7, javascript version 1.8.5, ordinateur DELL G3

Comment définir la largeur et la hauteur des éléments avec javascript ?

JS Obtenir la largeur et la hauteur de éléments html et définir la largeur et la hauteur

Obtenir la largeur et la hauteur du navigateur :

 var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Deux façons d'obtenir la largeur et la hauteur des éléments html

// 首先是取到元素
var main = document.getElementById('main');
// 第一种方式
var mainWidth = main.offsetWidth,
mainHeight = main.offsetHeight;
// 第二种方式
var mainWidth2 = main.style.width,
mainHeight2 = main.style.height;

La différence entre les deux méthodes est que la première méthode peut obtenir la largeur et height en aucun cas, tandis que la deuxième méthode ne peut obtenir que la largeur et la hauteur définies dans la largeur et la hauteur HTML, mais ne peut pas obtenir la largeur et la hauteur définies par CSS.

Définir la largeur et la hauteur

main.style.width = "120px";
main.style.height = "130px";

Il existe et seulement cette méthode, la méthode suivante n'est pas réalisable, test Firefox.

main.style.offsetWidth = "120px";
main.style.offsetHeight = "130px";

Apprentissage recommandé : "Tutoriel sur les bases de 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!