Bagaimana untuk menetapkan lebar dan ketinggian elemen dalam javascript

藏色散人
Lepaskan: 2021-11-15 15:22:37
asal
4449 orang telah melayarinya

Cara menetapkan lebar dan tinggi elemen menggunakan JavaScript: 1. Dapatkan lebar dan tinggi elemen html 2. Tetapkan lebar dan tinggi elemen melalui "main.style.width" dan "utama.gaya.tinggi".

Bagaimana untuk menetapkan lebar dan ketinggian elemen dalam javascript

Persekitaran pengendalian artikel ini: sistem windows7, versi javascript 1.8.5, komputer DELL G3

Cara untuk menetapkan lebar dan tinggi elemen dengan javascript?

JS Dapatkan lebar dan tinggi elemen html dan tetapkan lebar dan tinggi

Dapatkan lebar dan tinggi penyemak imbas:

 var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Salin selepas log masuk

Dua cara untuk mendapatkan lebar dan ketinggian elemen html

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

Perbezaan antara kedua-dua kaedah ialah kaedah pertama boleh mendapatkan lebar dan ketinggian dalam apa jua keadaan, manakala yang kedua kaedah hanya boleh mendapatkan lebar dan ketinggian yang ditakrifkan dalam html, tetapi bukan definisi css Lebar dan ketinggian.

Tetapkan lebar dan tinggi

main.style.width = "120px";
main.style.height = "130px";
Salin selepas log masuk

Ada dan satu-satunya kaedah Ujian Firefox tidak boleh dilakukan.

main.style.offsetWidth = "120px";
main.style.offsetHeight = "130px";
Salin selepas log masuk

Kajian yang disyorkan: "Tutorial Asas JavaScript"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar dan ketinggian elemen dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan