`
happy20070302
  • 浏览: 96701 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript：获取屏幕高度和宽度等信息 & 制作滚动窗体时遇到的问题

JavaScriptIEFirefoxCSSHTML 
阅读更多
javascript：获取屏幕高度和宽度等信息 & 制作滚动窗体时遇到的问题（转）
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

获取网页被卷去的高，制作浮动窗体可用：


function GetScrollY()
{       
    if (typeof window.pageYOffset == 'number')
    {
        return window.pageYOffset;
    }

    var CompatMode = window.document.compatMode;
    var DocumentElement = window.document.documentElement;

    if ((typeof CompatMode == 'string') && (CompatMode.indexOf('CSS') >= 0) && (DocumentElement) && (typeof DocumentElement.getAttribute("scrollTop") == 'number'))
    {
        return DocumentElement.getAttribute("scrollTop");
     }

    var Body = window.document.body ;

    if ((Body) && (typeof Body.getAttribute("scrollTop") == 'number'))
    {
        return Body.getAttribute("scrollTop");
    }

    return 0;
}


下面是“无定义 HTML 的 Event 事件”的测试代码，分别用 IE 和 Firefox 打开，点击页面就可看到结果。 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无定义 HTML 的 Event 事件</title>
<script language="javascript">
function getvalue(e){
if (!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
curX = e.pageX - window.pageXOffset;
curY = e.pageY - window.pageYOffset;
mouX = e.pageX;
mouY = e.pageY;
broX = window.pageXOffset;
broY = window.pageYOffset;
}else{
winW = document.body.clientWidth;
winH = document.body.clientHeight;
curX = event.clientX;
curY = event.clientY;
mouX = event.clientX + document.body.scrollLeft;
mouY = event.clientY + document.body.scrollTop;
broX = document.body.scrollLeft;
broY = document.body.scrollTop;
}
alert(" 窗口可见宽度(winW): "+winW+"\n\n 窗口可见高度(winH): "+winH+"\n\n 距窗口左边距离(curX): "+curX+"\n\n 距窗口顶部距离(curY): "+curY+"\n\n 距页面左边距离(mouX): "+mouX+"\n\n 距页面顶部距离(mouY): "+mouY+"\n\n 页面滚动的宽度(broX): "+broX+"\n\n 页面滚动的高度(broY): "+broY);
return true;
}
document.onclick=getvalue;
</script>
</head>

<body>
<img src="" width="400" height="500">
</body>
</html>


下面是“定义了 HTML&apos;s DOCTYPE 的 Event 事件”的测试代码，分别用 IE 和 Firefox 打开，点击页面就可看到结果。很显然，document.body 变成了 document.documentElement。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定义了 HTML&apos;s DOCTYPE 的 Event 事件</title>
<script language="JavaScript" type="text/javascript">
function getvalue(e){
if (!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
curX = e.pageX - window.pageXOffset;
curY = e.pageY - window.pageYOffset;
mouX = e.pageX;
mouY = e.pageY;
broX = window.pageXOffset;
broY = window.pageYOffset;
}else{
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
curX = event.clientX;
curY = event.clientY;
mouX = event.clientX + document.documentElement.scrollLeft;
mouY = event.clientY + document.documentElement.scrollTop;
broX = document.documentElement.scrollLeft;
broY = document.documentElement.scrollTop;
}
alert(" 窗口可见宽度(winW): "+winW+"\n\n 窗口可见高度(winH): "+winH+"\n\n 距窗口左边距离(curX): "+curX+"\n\n 距窗口顶部距离(curY): "+curY+"\n\n 距页面左边距离(mouX): "+mouX+"\n\n 距页面顶部距离(mouY): "+mouY+"\n\n 页面滚动的宽度(broX): "+broX+"\n\n 页面滚动的高度(broY): "+broY);
return true;
}
document.onclick=getvalue;
</script>
</head>

<body>
<img src="" width="400" height="500" alt="" />
</body>
</html>

分享到：
| 将csv导入sql2005
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript弹出窗体

    其中，“弹出窗体”是指利用JavaScript在用户当前浏览的网页之外打开一个新的窗口或者对话框，显示额外的信息或功能。 #### 二、实现方式 ##### 1. 使用`window.open`方法 `window.open`是创建新窗口的核心函数，...

    JavaScript添加随滚动条滚动窗体的方法

    它首先尝试使用`window.innerHeight`来获取视窗的高度（内部高度），然后根据这个高度来获取水平和垂直滚动的偏移量（`pageXOffset`和`pageYOffset`）。如果这些属性不存在，它会检查是否有`document....

    程序天下:JavaScript实例自学手册

    9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并...

    jquery 弹出模态窗体

    模态窗体（Modal Dialog）通常被用来显示警告、确认、信息或表单填写等场景，它会遮盖住背景页面，直到用户与模态窗体互动完毕才会消失。 在jQuery中实现弹出模态窗体，我们可以使用自定义的JavaScript代码或者依赖...

    javascript用DIV模拟弹出窗口_窗体滚动跟随

    ### JavaScript 使用 DIV 模拟弹出窗口与窗体滚动跟随技术解析 #### 一、概述 在网页设计中，为了实现更加丰富的交互效果，开发者常常需要实现一些特殊的功能，比如弹出窗口。传统的弹出窗口可能通过浏览器自身的 ...

    web的控件哦

    - Width和Height属性：分别设定窗体的宽度和高度，影响其在屏幕上的尺寸。 - Left和Top属性：调整窗体在屏幕坐标系中的位置。 - ControlBox属性：决定是否在标题栏中显示控制按钮，如关闭、最小化和最大化按钮。 ...

    网页实现全屏获取鼠标坐标

    可以利用`window.innerWidth`和`window.innerHeight`获取全屏的宽度和高度，结合`window.screenX`和`window.screenY`获取浏览器窗口在屏幕中的位置，进行计算。 ```javascript function handleMouseMove(event) { ...

    javascript 代码大全

    JavaScript是Web开发中不可或缺的一部分，它提供了丰富的功能来操作网页元素和处理用户交互。这篇“JavaScript代码大全”详细讲解了JavaScript中的常用对象及其用法，下面将深入探讨这些知识点。 1. **事件源对象**...

    vb 文字全屏滚动

    在VB（Visual Basic）编程中，有时候我们需要展示大量的文本，并且希望这些文本能以全屏滚动的方式呈现，尤其是在创建信息展示或公告系统时。传统的VB控件如Label或TextBox在处理大量文字时可能会出现性能问题，尤其...

    ShowModalDialog父窗体向子窗体传值

    - `dialogHeight`和`dialogWidth`：设置对话框的高度和宽度。 - `dialogLeft`和`dialogTop`：设定对话框相对于屏幕的位置。 - `center`：是否居中对话框，默认为yes。 - `help`：是否显示帮助按钮，默认为yes。 - `...

    窗体大小控制 JS 弹出

    在探讨“窗体大小控制 JS 弹出”的知识点时，我们深入分析JavaScript中窗口弹出功能的精细控制机制。此技术常用于创建自定义尺寸、位置及特性的弹出窗口，广泛应用于网页开发中，以增强用户体验和界面交互性。 ### ...

    基于iframe的跨域与更新父窗体地址栏的解决方案.docx

    - 当子窗体内部页面发生变化时，可以通过JavaScript获取新的`src`值，并使用`window.history.pushState`或`window.location.hash`更新父窗体的URL。 - 例如： ```javascript function updateUrl() { var iframe...

    javascript小技巧.doc

    1. **事件源对象**：`event.srcElement` 提供了触发事件的元素信息，可以通过 `event.srcElement.tagName` 和 `event.srcElement.type` 获取元素的标签名和类型。 2. **捕获与释放事件**：`event.srcElement....

    按高度进行分页代码

    标题“按高度进行分页代码”和描述提到的问题，就是如何根据内容区域的高度来实现分页功能。这种分页方式不同于传统的基于数据条目数量的分页，而是基于内容实际占据的视觉空间。 首先，我们看代码中的CSS部分： `...

    SJ模态窗体，WIndow.Open小实例

    - `features`：表示新窗口的特性，如宽度、高度、是否显示滚动条等，可以写成"width=400,height=300"这样的形式。 在实现模态窗体时，通常不希望新窗口能够被用户通过常规方式关闭或最小化，因此需要在`features`...

    javascript技巧大全

    在《JavaScript技巧大全》这篇文章中，作者主要介绍了JavaScript中一系列实用的技巧和技术，涵盖了事件处理、DOM操作、表单控制等多个方面。接下来我们将详细解析这些技巧的具体内容及其应用场景。 #### 事件处理 ...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    如：&lt;script type="text/javascript" src="ymPrompt.js"&gt;&lt;/script&gt; 2、在页面中引入对应的皮肤文件的CSS，如： 3、自定义组件的默认配置信息（此步骤可选，该方法可以在任意时间调用） 页面的js中通过ymPrompt....

Magicbox
Global site tag (gtag.js) - Google Analytics