JavaScript DHTML/Style Layout/Client

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

Client Height

    
<html>
<body>
<div id="myDiv" 
     style="position:absolute; 
            left:150; 
            top:100; 
            width:400; 
            height:200; 
            background-color:blue;">
</div>
<button onclick="alert(myDiv.clientHeight);">clientHeight</button>&nbsp;
<button onclick="alert(myDiv.clientWidth);">clientWidth</button>&nbsp;
<button onclick="alert(myDiv.clientLeft);">clientLeft</button>&nbsp;
<button onclick="alert(myDiv.clientTop);">clientTop</button>
<br>
<br>
</body>
</html>



Client Left Example

    
<html>
<body>
<div id="myDiv" 
     style="position:absolute; 
            left:150; 
            top:100; 
            width:400; 
            height:200; 
            background-color:blue;">
</div>
<button onclick="alert(myDiv.clientHeight);">clientHeight</button>&nbsp;
<button onclick="alert(myDiv.clientWidth);">clientWidth</button>&nbsp;
<button onclick="alert(myDiv.clientLeft);">clientLeft</button>&nbsp;
<button onclick="alert(myDiv.clientTop);">clientTop</button>
<br>
<br>
</body>
</html>



Client Top

    
<html>
<body>
<div id="myDiv" 
     style="position:absolute; 
            left:150; 
            top:100; 
            width:400; 
            height:200; 
            background-color:blue;">
</div>
<button onclick="alert(myDiv.clientHeight);">clientHeight</button>&nbsp;
<button onclick="alert(myDiv.clientWidth);">clientWidth</button>&nbsp;
<button onclick="alert(myDiv.clientLeft);">clientLeft</button>&nbsp;
<button onclick="alert(myDiv.clientTop);">clientTop</button>
<br>
<br>
</body>
</html>



Client Width Example

    
<html>
<body>
<div id="myDiv" 
     style="position:absolute; 
            left:150; 
            top:100; 
            width:400; 
            height:200; 
            background-color:blue;">
</div>
<button onclick="alert(myDiv.clientHeight);">clientHeight</button>&nbsp;
<button onclick="alert(myDiv.clientWidth);">clientWidth</button>&nbsp;
<button onclick="alert(myDiv.clientLeft);">clientLeft</button>&nbsp;
<button onclick="alert(myDiv.clientTop);">clientTop</button>
<br>
<br>
</body>
</html>



"clientX" Example

    
<html>
<body>
<script language="JavaScript">
function function1() {
    myX.value = window.event.clientX;
    myY.value = window.event.clientY; 
}
</script>
<body onmousemove="function1();">
X Coordinate: 
<input type="text" value="" id="myX" style="border:none;">
<br>
Y Coordinate: 
<input type="text" value="" id="myY" style="border:none;">
</body>
</html>



Client Y Example

    
<html>
<body>
<script language="JavaScript">
function function1() {
    myX.value = window.event.clientX;
    myY.value = window.event.clientY; 
}
</script>
<body onmousemove="function1();">
X Coordinate: 
<input type="text" value="" id="myX" style="border:none;">
<br>
Y Coordinate: 
<input type="text" value="" id="myY" style="border:none;">
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Style_Layout/Client&oldid=3865»