رمز HTML:
نسخة الكود كما يلي:
<body>
<div id = "الأب">
<h3> هذا هو العنصر الأصل ، دقة الشاشة هي 1366*768 </h3>
<div id = "son">
<h3> هذا عنصر طفل ، أتمنى لكم جميعًا يومًا وطنيًا سعيدًا </h3>
<div id = "حفيد">
<h3> هذا هو عنصر الحفيد ، أتمنى لكم جميعًا يومًا وطنيًا سعيدًا </h3>
<h3> مدونتي: www.vevb.com </h3>
<H3> متحمس البرنامج QQ Group: </H3>
<h3> 259280570 </h3>
<h3> مرحبًا بك للانضمام </h3>
<h3> يوم وطني سعيد </h3>
</div>
</div>
</div>
<viv>
<h3> إخراج البيانات </h3>
<div id = "data"> </viv>
</div>
</body>
CSS:
نسخة الكود كما يلي:
*
{
الهامش: 0 Auto ؛
}
.أب
{
العرض: 500 بكسل ؛
الارتفاع: 750 بكسل ؛
الحدود: 5 بكسل صلب أحمر.
تعويم: اليسار.
}
.ابن
{
العرض: 400 بكسل ؛
الارتفاع: 300 بكسل ؛
الحدود: 5px سوداء صلبة.
الهامش: 20 بكسل ؛
}
.حفيد
{
العرض: 150 بكسل ؛
الارتفاع: 100px ؛
الحدود: 5 بكسل الأزرق الصلب.
الهامش: 20 بكسل ؛
الفائض: السيارات ؛
}
.بيانات
{
العرض: 600 بكسل ؛
الارتفاع: 750 بكسل ؛
الحدود: 5 بكسل صلب أحمر.
تعويم: اليسار.
الهامش اليساري: 15px ؛
}
JS:
نسخة الكود كما يلي:
window.onload = function ()
{
/*الحصول على كائن العنصر*/
var الأب = document.getElementById ('الأب') ؛
var son = document.getElementById ('son') ؛
var Grandson = document.getElementById ('Gradson') ؛
var data = document.getElementById ('data') ؛
data.innerhtml = "<h3> احصل على حجم النافذة (المتعلقة بحجم النافذة) </h3>" ؛
data.innerhtml+= "document.body wide areible width:"+document.body.clientwidth+"<br/>" ؛
data.innerhtml+= "document.body ارتفاع المنطقة:"+document.body.clientheight+"<br/>" ؛
data.innerhtml+= "window.innerwidth منطقة مرئية عرض:"+window.innerwidth+"<br/>" ؛
data.innerhtml+= "window.innerheight ارتفاع المنطقة:"+window.innerheight+"<br/>" ؛
data.innerhtml+= "document.documentElement عرض المنطقة المرئية:"+document.documentElement.clientwidth+"<br/>" ؛
data.innerhtml+= "document.documentElement ارتفاع المنطقة:"+document.documentElement.clientheight+"<br/>" ؛
data.innerhtml += "<h3> يحصل على حجم العنصر (لا يتعلق بما إذا كان هناك شريط تمرير) </h3>" ؛
data.innerhtml+= ".
data.innerhtml+= ".son's queat (خاصية OffsetHeight ، بما في ذلك الحدود العلوية والسفلية):"+son.offsetheight+"<br/>" ؛
data.innerhtml+= ".son visual width (سمة clientwidth ، باستثناء الحدود اليمنى واليسرى):"+son.clientwidth+"<br/>" ؛
data.innerhtml+= ".son visual height (خاصية clientHeight ، باستثناء الحدود العلوية والسفلية):"+son.clientheight+"<br/>" ؛
data.innerhtml += "<h3> gets.gradson scroll size and visual size </h3>" ؛
data.innerhtml+= ".Gradson Scroll Width (ScrollWidth Property):"+Gradson.ScrollWidth+"<br/>" ؛
data.innerhtml+= ".Gradson Scroll Hight (Scrollheight Property):"+gradson.scrollheight+"<br/>" ؛
data.innerhtml+= ".Gradson Visual Width (خاصية ClientWidth ، باستثناء قضبان التمرير الرأسية والحدود):"+gradson.clientwidth+"<br/>" ؛
Data.InnerHtml+= ".Gradson Visual Height (خاصية ClientHeight ، باستثناء قضبان التمرير الأفقية والحدود):"+gradson.clientheight+"<br/>" ؛
data.innerhtml += "<h3> يحصل على حجم.
data.innerhtml+= ".Gradson يتم تشغيله عالياً (خاصية scrolltop ، شرائح شريط التمرير العمودي إلى الأسفل):"+gradson.scrolltop+"<br/>" ؛
data.InnerHtml+= ".Gradson يتم لفها من اليسار (خاصية Scrollleft ، شريط التمرير الأفقي ينزلق إلى أقصى اليمين):"+gradson.scrollleft+"<br/>" ؛
data.innerhtml += "<h3> احصل على موقع نافذة المتصفح (المتعلق بحجم النافذة) </h3>" ؛
/*
*IE ، Chrome ، Safari ، و Opera كلها توفر الدعم لـ Window.screenleft و *window.screentop ، لكن Firxfox لا تدعم هاتين الخصائص ؛
* توفر Firxfox و Chrome و Safari و Opera كلها دعمًا لـ Window.Screenx * و Window.screeny ، لكن IE لا تدعم هاتين الخصائص ؛
*/
var leftpos = (typeof window.screenleft == 'number')؟ window.screenleft: window.screenx ؛
var toppos = (typeof window.screentop == 'number')؟ window.screentop: window.screeny ؛
data.innerhtml+= "على جزء جسم صفحة الجسم (window.screentop (y)):"+toppos+"<br/>" ؛
data.innerhtml+= "نص صفحة الويب على الويب يسار (window.screenleft (x)):"+LeftPos+"<br/>" ؛
data.innerhtml += "<h3> الحصول على دقة الشاشة </h3>" ؛
data.innerhtml+= "دقة الشاشة العالية (window.screen.height):"+window.screen.height+"<br/>" ؛
data.innerhtml+= "عرض دقة الشاشة (window.screen.width):"+window.screen.width+"<br/>" ؛
data.innerhtml += "<h3> احصل على الارتفاع والعرض المتاحين على الشاشة </h3>" ؛
data.innerhtml+= "دقة الشاشة العالية (window.screen.availheight):"+window.screen.availheight+"<br/>" ؛
data.innerhtml+= "عرض دقة الشاشة (window.screen.availwidth):"+window.screen.availwidth+"<br/>" ؛
data.innerhtml += "<h3> احصل على حجم الحدود لـ .father </h3>" ؛
data.innerhtml+= ".
data.innerhtml+= ".
data.innerhtml + = "<h3> يحصل على المسافة من .son إلى حدود العنصر الأصل (أي ، الحدود المقابلة لعنصر الوالدين + الهامش) </h3>" ؛
data.innerhtml+= ".son إلى الحدود العليا للعنصر الأصل (Offsettop):"+son.offsettop+"<br/>" ؛
data.innerhtml+= ".son إلى الحدود اليسرى للعنصر الأصل (OffseTleft):"+son.offsetleft+"<br/>" ؛
}
ملاحظة: هناك اختلافات في تحليل المتصفح للمربع ، لذلك ستكون هناك اختلافات صغيرة في البيانات التي تم الحصول عليها أعلاه. صورة متصلة.
رمز كامل:
<! doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3 type = "text/css">*{margin: 0 auto ؛}. الأب {width: 500px ؛ الارتفاع: 750px ؛ الحدود: 5px solid Red ؛ float: left ؛}. الابن {width: 400px ؛ الارتفاع: 300px ؛ الحدود: 5px سوداء صلبة ؛ 20px ؛}. الأزرق ؛ الهامش: 20px ؛ تجاوز: Auto ؛}. البيانات {العرض: 600px ؛ الارتفاع: 750px ؛ الحدود: 5px صلب أحمر ؛ عائم: اليسار ؛ اليسار-اليسار: 15px ؛} </style> <script type = "text/javaScript"> window.onload = وظيفة () document.getElementById ('son') ؛ var grandson = document.getElementById ('gradson') ؛ var data = document.getElementById ('data') ؛ data.innerhtml = "<h3> احصل على حجم النافذة (المتعلق بحجم النافذة) </h3>" "+document.body.clientwidth+" <br/> "؛ data.innerhtml+=" document.body quality quight: "+document.body.clientheight+" <br/> الارتفاع: "+window.innerheight+" <br/> "؛ data.innerhtml+=" document.documentElement عرض المنطقة المرئية: "+document.documentElement.clientwidth+" <br/> += "<h3> احصل على حجم العنصر الخاص (لا يتعلق بما إذا كان هناك شريط تمرير) </h3>" ؛ data.innerhtml += ". "+son.offsetheight+" <br/> "+son.clientheight+" <br/> "؛ data.innerhtml+=" <h3> get .gradson scroll size وحجم مرئي </h3> خاصية): "+gradson.scrollheight+" <br/> الحدود): " +حفيد. "+حفيد. الحجم) </h3> "؛/** أي ، Chrome ، Safari ، Opera جميعها توفر الدعم لـ Window.screenleft و*window.screentop ، لكن Firxfox لا يدعم هاتين الخصائص ؛ * Firxfox ، Chrome ، Safari ، Opera كلاهما يوفر الدعم لـ Window.screenx * و Window.screeny ، لكن IE لا يدعم هاتين الخصائص ؛ */var leftpos = (typeof window.screenleft == 'number')؟ window.screenleft: window.screenx ؛ var toppos = (typeof window.screentop == 'number')؟ Toppos+"<br/>" ؛ data.innerhtml+= "جزء نص صفحة الويب من الجسم يركون (window.screenleft (x)):"+leftpos+"<br/> window.screen.height +"<br/>" ؛ data.innerhtml += "عرض دقة الشاشة (window.screen.width):" +window.screen.width +"<br/>" (window.screen.availheight): "+window.screen.availheight+" <br/> "؛ data.innerhtml+=" عرض دقة الشاشة (window.screen.availwidth): "+window.screen.availwidth+" <br/> .father </h3> "؛ data.innerhtml+=". هو ، الحدود المقابلة لعنصر الهامش+الأصل) </h3> "؛ data.innerhtml+=" .son إلى الحدود العليا للعنصر الوالد (Offsettop): "+son.offsettop+" <br/> son.offsetLeft+"<br/>" ؛} </script> </head> <body> <div id = "الأب"> <h3> هذا هو العنصر الأصل ، فإن دقة الشاشة هي 1366*768 </h3> <div id = "son"> <h3> هذا هو عنصر الطفل ، أتمنى لك يوم وطني سعيد </h3 اليوم الوطني </h3> <h3> مدونتي: www.vevb.com </h3> <h3> عاشق برنامج QQ: </h3> <h3> id = "data"> </viv> </viv> </body> </html>