Cukup nyaman untuk mendapatkan ukuran elemen yang terlihat oleh JS. Anda dapat menggunakan metode ini secara langsung:
Salinan kode adalah sebagai berikut:
Fungsi getDefaultStyle (obj, atribut) {// Mengembalikan fungsi gaya akhir, kompatibel dengan IE dan DOM, mengatur parameter: objek elemen, karakteristik gaya
return obj.currentstyle? obj.currentstyle [atribut]: document.defaultview.getComputedstyle (obj, false) [atribut];
}
Tetapi jika elemen ini disembunyikan (tampilan: tidak ada) dan ukurannya tidak diketahui dapat beradaptasi, maka metode di atas tidak akan berfungsi! Karena tampilan: tidak ada elemen yang tidak memiliki ukuran fisik! Tragedi itu terjadi seperti ini!
Untungnya, ada juga visibilitas: tersembunyi di CSS, yang tidak terlihat. Perbedaan terbesar antara itu dan tampilan: Tidak ada visibilitas: Tersembunyi memiliki ukuran fisik. Jika Anda memiliki ukuran fisik, Anda bisa mendapatkan ukuran dengan metode di atas, tetapi setelah mengubah tampilan: tidak ada visibilitas: tersembunyi, akan ada ruang kosong pada halaman. Bahkan jika Anda mengubah visibilitas: disembunyikan untuk ditampilkan: Tidak ada segera setelah Anda mendapatkan ukurannya, bagian dari halaman masih akan bergetar. Maka cara terbaik adalah memindahkan elemen tersembunyi ini keluar dari layar atau keluar dari aliran dokumen (posisi: absolute). Ini tampaknya sempurna, tetapi tragedi itu terjadi lagi. Jika Anda ingin menampilkan elemen ini lagi, elemen tidak terlihat dan posisinya tidak benar, karena ini adalah visibilitas elemen: tersembunyi; posisi: absolut. Jadi setelah mendapatkan ukurannya, Anda harus mengembalikan gaya kembali. Ini untuk mengatur atribut posisi dan visibilitas kembali ke gaya asli.
Ini adalah implementasi dasar JS untuk mendapatkan ukuran elemen tersembunyi. Jika Anda tertarik, Anda dapat melihat metode dalam buku ini "Propicient in JavaScript".
Saya juga telah membuat demo sederhana di sini, Anda dapat memeriksa kode sumbernya:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> js mendapatkan ukuran elemen tersembunyi </iteme>
<type style = "text/css">
</tyle>
<type skrip = "Text/JavaScript" src = "http://www.css88.com/tool/css3preview/jquery-1.4.2.min.js"> </script>
</head>
<body>
<div id="test_display_block" style="display:none; border:10px solid #CDCDCD; margin-left: 100px">This is the test container, the visible container<br />This is the test container, the visible container<br />This is the test container, the visible container<br />This is the test container, the visible container<br />This is the test container, the Kontainer uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji container, container uji, wadah uji, wadah uji, wadah uji, wadah uji container, container uji, wadah uji, wadah uji, wadah uji, container uji container, container uji, wadah uji, wadah uji, wadah uji, container uji contontand container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji, wadah uji,
<Div id = "test_display_none" style = "display: none; border: 10px solid #cdcdcd"> Ini adalah wadah uji, ini adalah wadah uji, <br /> ini adalah wadah uji, <br /> ini adalah wadah uji, <bR /> ini adalah wadah uji, <bR /> Ini adalah container uji, <BR /BR /ini adalah wadah uji, <bR /> Ini adalah container uji, <bR /BR /ini adalah container uji, <bR /> Ini adalah container uji, <br />
<Div id = "test_display_click"> klik saya </div>
<type skrip = "Teks/JavaScript">
// menilai jenis objek
fungsi getType (o) {
var _t;
return ((_t = typeof (o)) == "objek"? o == null && "null" || object.prototype.toString.call (o) .slice (8, -1): _ t) .tolowercase ();
}
// Dapatkan gaya elemen
fungsi getstyle (el, stylename) {
return el. style [stylename]? El.Style [Stylename]: El.CurrentStyle? el.currentstyle [stylename]: window.getComputedstyle (el, null) [stylename];
}
fungsi getstylenum (el, stylename) {
return parseint (getStyle (el, stylename) .replace (/px | pt | em/ig, ''));
}
fungsi setstyle (el, obj) {
if (getType (obj) == "objek") {
untuk (s di obj) {
var cssarrrt = s.split ("-");
untuk (var i = 1; i <cssarrrt.length; i ++) {
csSarrrt [i] = cssarrrt [i] .replace (cssarrrt [i] .charat (0), cssarrrt [i] .charat (0) .tuppercase ());
}
var cssarrnew = cssarrrt.join ("");
el.style [cssarrtnew] = obj [s];
}
}
kalau tidak
if (getType (obj) == "string") {
el.style.csstext = obj;
}
}
fungsi getSize (el) {
if (getstyle (el, "display")! = "none") {
return {width: el.offsetWidth || getstylenum (el, "width"), tinggi: el.offsetheight || getstylenum (el, "tinggi")};
}
var _addcss = {display: "", position: "absolute", visibilitas: 'tersembunyi'};
var _oldCss = {};
untuk (i in _addcss) {
_OldCSS [i] = getStyle (el, i);
}
setStyle (el, _addcss);
var _width = el.clientwidth || getstylenum (el, "lebar");
var _height = el.clientHeight || getstylenum (el, "tinggi");
untuk (i in _oldcss) {
setstyle (el, _oldcss);
}
return {width: _width, tinggi: _height};
}
var dd = document.geteLementById ("test_display_block");
peringatan (getSize (dd) .height);
document.geteLementById ("test_display_click"). onclick = function () {
dd.style.display = "block";
document.geteLementById ("test_display_none"). style.display = "block";
}
alert ($ ("#test_display_none"). height ());
</script>
</body>
</html>
Off Topic: Secara umum, kerangka kerja JavaScript dan perpustakaan telah merangkum metode ini. Misalnya, JQ, kita dapat secara langsung menggunakan metode tinggi () dan lebar () untuk mendapatkan ukuran elemen tersembunyi.