من المريح للغاية الحصول على حجم العناصر المرئية بواسطة JS. يمكنك استخدام هذه الطريقة مباشرة:
نسخة الكود كما يلي:
وظيفة getDefaultStyle (OBJ ، السمة) {// إرجاع وظيفة النمط النهائي ، متوافقة مع IE و DOM ، يعين المعلمات: كائن العنصر ، خصائص النمط
إرجاع OBJ.CurrentStyle؟ obj.currentStyle [السمة]: document.defaultView.getComputedStyle (OBJ ، false) [السمة] ؛
}
ولكن إذا كان هذا العنصر مخفيًا (العرض: لا شيء) وحجمه غير قابل للتكيف ، فلن تعمل الطريقة أعلاه! لأن الشاشة: لا يوجد أي عنصر لا يوجد حجم فعلي! حدثت المأساة مثل هذا!
لحسن الحظ ، هناك أيضًا رؤية: مخبأة في CSS ، وهو أمر غير مرئي. الفرق الأكبر بينه وبين العرض: لا شيء هو تلك الرؤية: Hidden لها حجم مادي. إذا كان لديك أحجام فعلية ، فيمكنك الحصول على الحجم من خلال الطريقة أعلاه ، ولكن بعد تغيير العرض: لا شيء إلى الرؤية: مخفية ، ستكون هناك مساحة فارغة على الصفحة. حتى إذا قمت بتغيير الرؤية: مخفية لعرضها: لا شيء بعد الحصول على الحجم فورًا ، سيظل جزء الصفحة يهتز. ثم أفضل طريقة هي نقل هذا العنصر الخفي خارج الشاشة أو خارج دفق المستند (الموضع: مطلق). هذا يبدو مثاليًا ، لكن المأساة تحدث مرة أخرى. إذا كنت ترغب في عرض هذا العنصر مرة أخرى ، فإن العنصر غير مرئي والموقف غير صحيح ، لأن هذه هي رؤية العنصر: مخفية ؛ الموضع: مطلق. لذلك بعد الحصول على الحجم ، يجب عليك استعادة النمط مرة أخرى. إنه لضبط سمات الموضع والوضوح مرة أخرى إلى النمط الأصلي.
هذا هو التنفيذ الأساسي لـ JS للحصول على حجم العناصر المخفية. إذا كنت مهتمًا ، فيمكنك إلقاء نظرة على الطريقة في كتاب "Profort in JavaScript".
لقد قمت أيضًا بعمل عرض تجريبي بسيط هنا ، يمكنك التحقق من رمز المصدر:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> يحصل JS على حجم العنصر المخفي </title>
<type 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 = "display: none ؛ border: 10px solid #cdcdcd ؛ margin-left: 100px"> حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، الحاوية ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، الحاوية ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ، حاوية الاختبار ،
<div id = "test_display_none" style = "display: 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) {
إرجاع el.style [stylename]؟ el.style [stylename]: el.currentStyle؟ el.CurrentStyle [stylename]: window.getComputedStyle (EL ، NULL) [stylename] ؛
}
وظيفة getStylenum (el ، stylename) {
إرجاع parseint (getStyle (el ، stylename) .replace (/px | pt | em/ig ، '')) ؛
}
وظيفة setStyle (el ، obj) {
if (gettype (obj) == "كائن") {
لـ (s في OBJ) {
var cssarrrt = s.split ("-") ؛
لـ (var i = 1 ؛ i <cssarrt.length ؛ i ++) {
cssarrrt [i] = cssarrrt [i] .replace (cssarrrt [i] .charat (0) ، cssarrrt [i] .charat (0) .ToupperCase ()) ؛
}
var cssarrtnew = cssarrt.join ("") ؛
el.style [cssarrtnew] = obj [s] ؛
}
}
آخر
if (gettype (obj) == "سلسلة") {
el.style.csstext = obj ؛
}
}
وظيفة gettize (el) {
if (getStyle (EL ، "Display")! = "none") {
إرجاع {العرض: el.offsetwidth || GetStylenum (EL ، "العرض") ، الارتفاع: el.offsetheight || getStylenum (EL ، "الارتفاع")} ؛
}
var _addcss = {display: "" ، الموضع: "المطلق" ، الرؤية: "مخفية"} ؛
var _oldcss = {} ؛
ل (أنا في _addcss) {
_oldcss [i] = getStyle (el ، i) ؛
}
setStyle (el ، _addcss) ؛
var _width = el.clientwidth || getStylenum (EL ، "العرض") ؛
var _height = el.clientheight || getStylenum (EL ، "الارتفاع") ؛
ل (أنا في _oldcss) {
setStyle (el ، _oldcss) ؛
}
إرجاع {العرض: _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" ؛
}
ALERT ($ ("#test_display_none"). الارتفاع ()) ؛
</script>
</body>
</html>
خارج الموضوع: بشكل عام ، قام إطار عمل JavaScript والمكتبات بتغليف هذه الطريقة. على سبيل المثال ، JQ ، يمكننا استخدام طرق الارتفاع () والعرض () مباشرة للحصول على حجم العناصر المخفية.