JavaScript DHTML/Style Layout/Bounding Client — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Версия 10:02, 26 мая 2010

Bounding Client Rect "bottom"

    
<html>
<body>
<p id="myP" style="background-color:black; color:white; width:200;">
This is some sample text.
</p>
<button onclick="alert(myP.getBoundingClientRect().bottom);">Bottom</button>
</body>
</html>



Bounding Client Rect "left" Example

    
<html>
<body>
<p id="myP" style="background-color:black; color:white; width:200;">
This is some sample text.
</p>
<button onclick="alert(myP.getBoundingClientRect().bottom);">Bottom</button>
<button onclick="alert(myP.getBoundingClientRect().top);">Top</button>
<button onclick="alert(myP.getBoundingClientRect().left);">Left</button>
<button onclick="alert(myP.getBoundingClientRect().right);">Right</button>
</body>
</html>



Bounding Client Rect "right" Example

    
<html>
<body>
<p id="myP" style="background-color:black; color:white; width:200;">
This is some sample text.
</p>
<button onclick="alert(myP.getBoundingClientRect().bottom);">Bottom</button>
<button onclick="alert(myP.getBoundingClientRect().top);">Top</button>
<button onclick="alert(myP.getBoundingClientRect().left);">Left</button>
<button onclick="alert(myP.getBoundingClientRect().right);">Right</button>
</body>
</html>



Bounding Client Rect "top" Example

    
<html>
<body>
<p id="myP" style="background-color:black; color:white; width:200;">
This is some sample text.
</p>
<button onclick="alert(myP.getBoundingClientRect().bottom);">Bottom</button>
<button onclick="alert(myP.getBoundingClientRect().top);">Top</button>
<button onclick="alert(myP.getBoundingClientRect().left);">Left</button>
<button onclick="alert(myP.getBoundingClientRect().right);">Right</button>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Style_Layout/Bounding_Client&oldid=3906»