HTML -код:
Кода -копия выглядит следующим образом:
<тело>
<div id = "отец">
<h3> Это родительский элемент, разрешение экрана составляет 1366*768 </h3>
<div id = "son">
<h3> Это детский элемент, я желаю всем счастливого национального дня </h3>
<div id = "внук">
<h3> Это элемент внука, я желаю вам всем счастливого национального дня </h3>
<h3> Мой блог: www.vevb.com </h3>
<h3> Группа энтузиаста программы: </h3>
<h3> 259280570 </h3>
<h3> Добро пожаловать, чтобы присоединиться к </h3>
<h3> Счастливого национального дня </h3>
</div>
</div>
</div>
<div>
<h3> Вывод данных </h3>
<div id = "data"> </div>
</div>
</body>
CSS:
Кода -копия выглядит следующим образом:
*
{
Поле: 0 Авто;
}
.отец
{
Ширина: 500px;
Высота: 750px;
Граница: 5px твердый красный;
Плавание: осталось;
}
.сын
{
Ширина: 400px;
Высота: 300px;
Граница: 5px твердый черный;
Маржа: 20px;
}
.внук
{
Ширина: 150px;
высота: 100px;
Граница: 5px твердый синий;
Маржа: 20px;
переполнение: авто;
}
.данные
{
Ширина: 600px;
Высота: 750px;
Граница: 5px твердый красный;
Плавание: осталось;
Мяботая маржа: 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 Visible Area ширина:"+document.body.clientWidth+"<br/>";
data.innerhtml+= "Document.Body Visible Pree Diest:"+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+= ".son's собственная ширина (свойство OffsetWidth, включая левую и правую границу):"+son.offsetwidth+"<br/>";
data.innerhtml+= ".son's собственная высота (свойство Offsetheight, включая верхние и нижние границы):"+son.offsetheight+"<br/>";
data.innerhtml+= ".son визуальная ширина (атрибут клиента -типа, за исключением левой и правой границы):"+son.clientwidth+"<br/>";
data.innerhtml+= ".son Visual Height (свойство ClientHeight, за исключением верхних и нижних границ):"+son.clientHeight+"<br/>";
data.innerhtml += "<h3> gets.gradson scroll size и визуальный размер </h3>";
data.innerhtml+= ".gradson Scroll ширина (свойство ScrollWidth):"+gradson.scrollwidth+"<br/>";
data.innerhtml+= ".gradson Scroll Height (свойство Scrollheight):"+gradson.scrollheight+"<br/>";
data.innerhtml+= ".gradson Visual Whidth (свойство клиента -типа, исключая вертикальные полосы прокрутки и границу):"+gradson.clientwidth+"<br/>";
data.innerhtml+= ".gradson Visual Height (свойство ClientHeight, исключая горизонтальные полосы прокрутки и границы):"+gradson.clientHeight+"<br/>";
data.innerhtml += "<h3> Получает размер свернутого .Gradson (связанный с положением полоса прокрутки) </h3>";
data.innerhtml+= ".gradson снимается с высокой (свойство Scrolltop, вертикальные стержень прокрутки вниз):"+gradson.scrolltop+"<br/>";
data.innerhtml+= ".gradson снимается с левого (свойство Scrollleft, горизонтальный прокрученный стержень до самого правого конца):"+Gradson.sclolleft+"<br/>";
data.innerhtml += "<h3> Получить местоположение окна браузера (связанное с размером окна) </h3>";
/*
*IE, Chrome, Safari и Opera обеспечивают поддержку Window.screenleft и *window.screentop, но Firxfox не поддерживает эти два свойства;
* FIRXFOX, Chrome, Safari и Opera обеспечивают поддержку Window.screenx * и Window.cessery, но IE не поддерживает эти два свойства;
*/
var LeatsPos = (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)):"+LeatsPos+"<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+= ".father Верхняя граница (ClientTop):"+pather.clienttop+"<br/>";
data.innerhtml+= ". Отец левой границы (ClientLeft):"+pather.clientleft+"<br/>";
data.innerhtml + = "<h3> Получает расстояние от .son до границы родительского элемента (то есть граница, соответствующая маржину + родительскому элементу) </h3>";
data.innerhtml+= ".son к верхней границе родительского элемента (OffSetTop):"+son.offsettop+"<br/>";
data.innerhtml+= ".son на левую границу родительского элемента (offsetleft):"+son.offsetleft+"<br/>";
}
PS: Есть различия в анализе браузера коробки, поэтому в данных, полученных выше, будут небольшие различия. Прикрепленная картина.
Полный код:
<! Doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta charset = "utf-8"/> test </tit type = "text/css">*{маржа: 0 auto;}. Отец {ширина: 500px; высота: 750px; граница: 5px твердый красный; поплавок: слева;}. Son {width: 400px; высота: 300px; граница: 5px solid black; маржа: 20px;}. Grandson {width: 150px; Blue; Margin: 20px; переполнение: auto;}. Data {width: 600px; высота: 750px; граница: 5px solid red; float: слева; Маржин-лето: 15px;} </style> <script type = "text/javascript"> window.onload = function () {/*Получить элемент объекта*/var wation = gate.getemb wind. document.getElementById ('son'); var grandson = document.getElementByid ('gradson'); var data = document.getElementById ('data'); data.innerhtml = "<h3> Получить размер окна (связанный с размером окна) </h3>"; data.innerhtml += " "+document.body.clientWidth+" <br/> "; data.innerhtml+=" Document.Body Visible Diest Height: "+Document.Body.clientHeight+" <br/> ";; data.innerhtml+=" window.innerwidth visible heartheme withtmht.In. Высота площади: "+window.innerheight+" <br/> "; data.innerhtml+=" document.documentelement видимая ширина области: "+document.documentelement.clientwidth+" <br/> "; data.innerhtml+=" Document.documentelement Visible Diest: " +Document.documentelement.clientHeight +" <br/> "; data.innerhtml +=" <h3> Получите собственный размер элемента (не связанный с тем, есть ли полоса прокрутки) </h3> "; data.innerhtml +=". "+son.offsetwidth+" <br/> "; data.innerhtml+=". Собственная высота. "+son.clientwidth+" <br/> "; data.innerhtml+=" .son Visible Height (свойство ClientHeight, исключение верхних и нижних границ): "+son.clientHeight+" <br/> "; data.innerhtml+=" <h3> Get. Get .Gradson Scroll и Visible Size </h3> "; Ширина (свойство ScrollWidth): "+gradson.scrollwidth+" <br/> "; data.innerhtml+=" .Gradson Scroll Height (свойство Scrollheight): "+Gradson.scrollheight+" <br/> "; "+Grandson.clientWidth+" <br/> "; data.innerhtml+=". Грандсон визуальная высота (атрибут клиента, исключая горизонтальные стержни свитков и границу): "+Grandson.clientHeight+" <br/> "; Data.innerhtml+=" bar) </h3> "; data.innerhtml +=" .grandson выкатывается высоким (свойство Scrolltop, вертикальные стержень прокрутки вниз): " +Grandson.scrolltop +" <br/> "; Data.innerhtml +=". Грандсон выкатывается влево (Scollleft, Horizontal Barll Slides stirds ledids stry -ron ron the Rights): прямо): прямо): прямо): прямо): прямо): прямо): прямо): прямо): прямо): прямо): прямо): прямо): "+grandson.scrollleft+" <br/> "; data.innerhtml+=" <h3> Получить положение окна браузера (связанное с размером окна) </h3> ";/** IE, Chrome, Safari, Opera - все это обеспечивает поддержку Window.screenleft и*window.creentop, но FIRXFOX не поддерживает эти два продукции; * FIRXFOX, Chrome, Safari, Opera обеспечивают поддержку Window.Screenx * и Window.screeny, но IE не поддерживает эти два свойства; */var Leatspos = (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)):"+LeatsPos+"<br/>"; data.innerhtml+= "<h3> Получить разрешение экрана </h3>"; data.innerhtml+= "Высоко разрешения экрана. window.screen.height +"<br/>";; data.innerhtml += "Ширина разрешения экрана (window.screen.width):" +window.screen.width +"<br/>"; data.innerhtml += " (window.screen.availheight): "+window.screen.availheight+" <br/> "; data.innerhtml+=" ширина разрешения экрана (window.screen.availWidth): "+window.screen.availWidth+" <br/> "; .father </h3> "; data.innerhtml+=". ОТДЕЛАСЬ Верхняя граница (ClientTop): "+Cathen.ClientTop+" <br/> "; data.innerhtml+=". IS, граница, соответствующая маржину+родительскому элементу) </h3> "; data.innerhtml+=" .son к верхней границе родительского элемента (OffSetTop): "+son.offsetTop+" <br/> "; data.innerhtml+=" .son на левую границу родительского элемента (Offsetleft): "+" son.offsetleft+"<br/>";} </script> </head> <body> <div id = "отец"> <h3> Это родительский элемент, разрешение экрана - 1366*768 </h3> <div id = "son"> <h3> Это детский элемент, я желаю вам счастливого национального дня </h3> <div Id = "Грандсон Национальный день </h3> <h3> мой блог: www.vevb.com </h3> <h3> Любовница программы QQ Группа: </h3> <h3> 259280570 </h3> <h3> Добро пожаловать в присоединение </h3> <h3> Happy National Day </h3> </div> </div> <H3> </H3> </H3> </H3> </H3> </H3> </H3> </H3> </H3> </H3> </H3> </H3> </H3> id = "data"> </div> </div> </body> </html>