มันค่อนข้างสะดวกที่จะได้รับขนาดขององค์ประกอบที่มองเห็นได้โดย JS คุณสามารถใช้วิธีนี้โดยตรง:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getDefaultStyle (obj, attribute) {// ส่งคืนฟังก์ชันสไตล์สุดท้ายเข้ากันได้กับ IE และ DOM ตั้งค่าพารามิเตอร์: วัตถุองค์ประกอบลักษณะสไตล์สไตล์
ส่งคืน obj.currentstyle? obj.currentstyle [แอตทริบิวต์]: document.defaultView.getComputedStyle (OBJ, FALSE) [แอตทริบิวต์];
-
แต่ถ้าองค์ประกอบนี้ซ่อนอยู่ (จอแสดงผล: ไม่มี) และขนาดของมันไม่เป็นที่รู้จักที่ปรับได้แล้ววิธีการข้างต้นจะไม่ทำงาน! เพราะจอแสดงผล: ไม่มีองค์ประกอบไม่มีขนาดทางกายภาพ! โศกนาฏกรรมเกิดขึ้นเช่นนี้!
โชคดีที่มีทัศนวิสัย: ซ่อนอยู่ใน CSS ซึ่งมองไม่เห็น ความแตกต่างที่ใหญ่ที่สุดระหว่างมันและการแสดงผล: ไม่มีการมองเห็น: Hidden มีขนาดทางกายภาพ หากคุณมีขนาดทางกายภาพคุณจะได้รับขนาดโดยวิธีข้างต้น แต่หลังจากเปลี่ยนจอแสดงผล: ไม่มีการมองเห็น: ซ่อนจะมีพื้นที่ว่างบนหน้า แม้ว่าคุณจะเปลี่ยนการมองเห็น: ซ่อนอยู่เพื่อแสดง: ไม่มีทันทีหลังจากที่คุณได้รับขนาดส่วนของหน้าจะยังคงสั่นคลอน จากนั้นวิธีที่ดีที่สุดคือการย้ายองค์ประกอบที่ซ่อนอยู่นี้ออกจากหน้าจอหรือออกจากสตรีมเอกสาร (ตำแหน่ง: สัมบูรณ์) สิ่งนี้ดูเหมือนจะสมบูรณ์แบบ แต่โศกนาฏกรรมเกิดขึ้นอีกครั้ง หากคุณต้องการแสดงองค์ประกอบนี้อีกครั้งองค์ประกอบจะมองไม่เห็นและตำแหน่งไม่ถูกต้องเพราะนี่คือการมองเห็นขององค์ประกอบ: ซ่อนตำแหน่ง: สัมบูรณ์ ดังนั้นหลังจากได้รับขนาดคุณต้องกู้คืนสไตล์กลับ มันคือการตั้งค่าตำแหน่งและคุณลักษณะการมองเห็นกลับไปเป็นสไตล์ดั้งเดิม
นี่คือการใช้งานพื้นฐานของ JS เพื่อให้ได้ขนาดขององค์ประกอบที่ซ่อนอยู่ หากคุณสนใจคุณสามารถดูวิธีการในหนังสือ "Proficient in JavaScript"
ฉันได้ทำการสาธิตอย่างง่ายที่นี่คุณสามารถตรวจสอบซอร์สโค้ด:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js ได้รับขนาดขององค์ประกอบที่ซ่อนอยู่ </title>
<style type = "text/css">
</style>
<script type = "text/javascript" src = "http://www.css88.com/tool/css3preview/jquery-1.4.2.min.js"> </script>
</head>
<body>
<div id = "test_display_block" style = "จอแสดงผล: none; border: 10px solid #cdcdcd; margin-left: 100px"> นี่คือคอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ที่มองเห็นได้ <br /> นี่คือการทดสอบคอนเทนเนอร์ คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, การทดสอบ, คอนเทนเนอร์ทดสอบ, บรรจุบรรจุบรรจุบรรจุบรรจุภัณฑ์ คอนเทนเนอร์, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, บรรจุบรรจุ, บรรจุบรรจุ, บรรจุบรรจุ คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, การทดสอบ, คอนเทนเนอร์ทดสอบ, บรรจุบรรจุบรรจุบรรจุบรรจุภัณฑ์ คอนเทนเนอร์, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, บรรจุบรรจุ, บรรจุบรรจุ, บรรจุบรรจุ คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ, คอนเทนเนอร์ทดสอบ,
<div id = "test_display_none" style = "displem: none; border: 10px solid #cdcdcd"> นี่คือคอนเทนเนอร์ทดสอบนี่คือคอนเทนเนอร์ทดสอบ <br /> นี่คือคอนเทนเนอร์ทดสอบ <br /> นี่คือคอนเทนเนอร์ทดสอบ <br /> นี่คือคอนเทนเนอร์ทดสอบ <br />
<div id = "test_display_click"> คลิกฉัน </div>
<script type = "text/javascript">
// ตัดสินประเภทวัตถุ
ฟังก์ชั่น getType (o) {
var _t;
return ((_t = typeof (o)) == "object"? o == null && "null" || object.prototype.toString.call (o) .slice (8, -1): _ t) .ToLowerCase ();
-
// รับสไตล์องค์ประกอบ
ฟังก์ชั่น getStyle (el, stylename) {
return el.style [stylename]? El.Style [stylename]: El.Currentstyle? El.CurrentStyle [stylename]: window.getComputedStyle (EL, NULL) [stylename];
-
ฟังก์ชั่น getstylenum (el, stylename) {
ส่งคืน parseint (getStyle (el, stylename). แทนที่ (/px | pt | em/ig, ''));
-
ฟังก์ชั่น setStyle (el, obj) {
if (getType (obj) == "object") {
สำหรับ (s ใน obj) {
var cssarrrt = s.split ("-");
สำหรับ (var i = 1; i <cssarrrt.length; i ++) {
cssarrrt [i] = cssarrrt [i] .replace (cssarrrt [i] .charat (0), cssarrrt [i] .charat (0) .touppercase ());
-
var cssarrtNew = cssarrrt.join ("");
el.style [cssarrtnew] = obj [s];
-
-
อื่น
if (getType (obj) == "String") {
el.style.csstext = obj;
-
-
ฟังก์ชั่น getsize (el) {
if (getStyle (el, "display")! = "none") {
return {width: el.offsetWidth || getstylenum (el, "width"), ความสูง: el.offsetheight || getstylenum (el, "ความสูง")};
-
var _addcss = {display: "", ตำแหน่ง: "สัมบูรณ์", การมองเห็น: 'ซ่อน'};
var _oldcss = {};
สำหรับ (i ใน _addcss) {
_oldcss [i] = getStyle (el, i);
-
setStyle (el, _addcss);
var _width = el.clientWidth || getstylenum (el, "width");
var _height = el.clientheight || getstylenum (el, "ความสูง");
สำหรับ (i ใน _oldcss) {
SetStyle (El, _oldcss);
-
return {width: _width, ความสูง: _height};
-
var dd = document.getElementById ("test_display_block");
การแจ้งเตือน (GetSize (DD) .Height);
document.getElementById ("test_display_click"). onclick = function () {
dd.style.display = "block";
document.getElementById ("test_display_none"). style.display = "block";
-
การแจ้งเตือน ($ ("#test_display_none"). ความสูง ());
</script>
</body>
</html>
นอกหัวข้อ: โดยทั่วไปแล้วกรอบงาน JavaScript และห้องสมุดได้ห่อหุ้มวิธีนี้ ตัวอย่างเช่น JQ เราสามารถใช้ความสูง () และความกว้าง () โดยตรงเพื่อรับขนาดขององค์ประกอบที่ซ่อนอยู่