本文介绍了一种使用JavaScript来获取HTML页面中特定元素的位置(offsetTop, offsetLeft)和尺寸(offsetHeight, offsetWidth)的方法。通过实例展示了如何在网页中动态获取这些属性值，并将结果展示给用户。
主要用到offsetTop,offsetLeft（获取控件坐标）。还有offsetHeight,offsetWidth（屏幕的高和宽）
<%...@ Page language="c#" AutoEventWireup="false" Inherits="gr.Test" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>测试</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language=javascript>...
<!--
function getFocus()
...{
var top;
var width;
top = document.all["txt"].offsetTop;
width = document.all["txt"].offsetLeft;
document.all["txtResult"].value = top +","+width;
}
//-->
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
</form>
<table width="100%" height="100%">
<tr>
<td height=100></td>
</tr>
<tr>
<td><input id=txtResult type=text></td>
</tr>
<tr>
<td><input id=txt type=text></td>
</tr>
<tr>
<td><input id=bt type=button onclick="getFocus()" value=获取></td>
</tr>
</table>
</body>
</HTML>
<%...@ Page language="c#" AutoEventWireup="false" Inherits="gr.Test" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD> <title>测试</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script language=javascript>...<!--function getFocus()...{ var top; var width; top = document.all["txt"].offsetTop; width = document.all["txt"].offsetLeft; document.all["txtResult"].value = top +","+width;}//--></script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> </form> <table width="100%" height="100%"> <tr> <td height=100></td> </tr> <tr> <td><input id=txtResult type=text></td> </tr> <tr> <td><input id=txt type=text></td> </tr> <tr> <td><input id=bt type=button onclick="getFocus()" value=获取></td> </tr> </table> </body></HTML>
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
