<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="BUTTON" ONCLICK="d()">
<div id="div"></div>
<div id="div2" style="position:absolute; top:250px; left:100px; width:750px; height: 550px; background-color:#999999"></div>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function computeLocation(obj) {
if (obj == null)
return {
x : 0,
y : 0,
w : 0,
h : 0
};
var loc_ = {
x : 0,
y : 0,
w : obj.offsetWidth,
h : obj.offsetHeight
};
while (obj) {
loc_.x += obj.offsetLeft;
loc_.y += obj.offsetTop;
obj = obj.offsetParent;
}
return loc_;
}
function get(id){return document.getElementById(id);}
function addEvent(c, b, a) {
if (c.addEventListener) {
c.addEventListener(b, a, false);
} else {
c.attachEvent("on" + b, a);
}
}
function d(){
get("div").innerHTML = "document.body.offsetHeight（Dom呈现的高度，以px为单位的整数）:" + document.body.offsetHeight;
get("div").innerHTML += "<br/>";
get("div").innerHTML += "document.body.offsetLeft（Dom的左边缘相对于包含其元素（offsetParent）的左边缘的距离，px为单位）:" + document.body.offsetTop;
get("div").innerHTML += "<br/>";
get("div").innerHTML += "document.body.clientHeight:Window.innerheight（\"Window\"的可见部分的高度，px为单位）:" + (document.body.clientHeight?document.body.clientHeight:Window.innerheight);
get("div").innerHTML += "<br/>";
get("div").innerHTML += "document.body.scrollHeight（Dom的实际高度，不出现滚动条的高度，px为单位）:" + document.body.scrollHeight;
get("div").innerHTML += "<br/>";
get("div").innerHTML += "document.body.scrollTop（纵向滚动条卷起的长度，px为单位）:" + document.body.scrollTop;
get("div").innerHTML += "<br/>";
get("div2").style.top = ((document.body.clientHeight?document.body.clientHeight:Window.innerheight) - computeLocation(get("div2")).h) + "px";
get("div2").style.left = ((document.body.clientWidth?document.body.clientWidth:Window.innerwidth) - computeLocation(get("div2")).w) + "px";
get("div2").style.top = ((document.body.clientHeight?document.body.clientHeight:Window.innerheight) - computeLocation(get("div2")).h) + "px";
}
//-->
</SCRIPT>
分享到：
相关推荐
这个问题其实涉及Vue框架中事件处理和DOM操作的几个关键概念，包括生命周期钩子、DOM更新机制、以及$nextTick的使用。 在Vue中，我们通常会通过生命周期钩子函数来执行某些操作，例如在组件初始化后（mounted钩子）...
在DOM-drag中，主要涉及以下几个关键技术点： 1. **事件监听**：我们需要为可拖动元素设置`mousedown`、`mousemove`和`mouseup`事件监听器。`mousedown`事件触发时，记录下初始位置；`mousemove`事件处理拖动过程；...
以下是对DOM2非标准但被广泛支持的几个关键属性的详细解释： 1. **偏移量** - `offsetWidth`：这个属性返回元素的完整宽度，包括内边距、边框以及如果有的话，滚动条的宽度。它可以帮助开发者了解元素在页面上的...
总结来说，`window.pageXOffset`、`window.pageYOffset`、`document.documentElement.scrollLeft`、`document.documentElement.scrollTop`、`...document.body.scrollTop` 这几个属性是JavaScript中获取页面滚动距离的核心...
综上所述，这个压缩包文件提供的"非常好好看的几个登录页面（html，css）1"，不仅包含了基本的HTML和CSS登录页面设计，还可能涉及JavaScript和jQuery的交互功能。学习这些示例，有助于理解和实践网页开发中的关键...
视差滚动的实现原理主要涉及以下几个关键步骤： 1. **元素定位**：为页面中的各个部分定义相对位置，通常使用CSS的`position`属性设置为`relative`、`absolute`或`fixed`。 2. **滚动监听**：使用JavaScript监听...
在"页面随意漂浮代码"的场景下，我们需要关注以下几个关键知识点： 1. **DOM操作**：DOM（Document Object Model）是HTML和XML文档的结构化表示。JavaScript通过DOM API可以访问和修改文档的任何部分。例如，我们...
具体来说，可以细分为以下几个方面： 1. 网页可见区域的尺寸：这部分指的是浏览器窗口中未被其他界面元素（如菜单栏、工具栏等）遮挡的区域，用户可以在此区域浏览网页内容。 - 网页可见区域的宽度可以通过`...
动画过程中，首先设置了一个负值给document.body.style.marginTop，它实际上会将页面向上滚动相同的距离，然后通过设置document.body.scrollTop为0，将滚动条拉到页面顶部。之后，将过渡属性设置为'none'，避免滚动...
如果所有祖先元素都是静态定位（position: static），则这两个属性表示元素与文档顶部和左侧的距离。如果有绝对定位的祖先元素，它们将相对于最近的绝对或固定定位的祖先计算。例如，可以使用递归函数获取元素相对于...
这个功能的实现主要依赖于jQuery库中的几个关键函数和特性： 1. **$(document).ready()**：这是jQuery中的一个常用函数，用于确保DOM（文档对象模型）加载完成后才执行后续的JavaScript代码。在这个例子中，它确保...
要获取这一位置，我们需要考虑以下几个因素： 1. **偏移量（Offset Properties）**：`offsetTop` 和 `offsetLeft` 属性提供了元素相对于其最近的非静态定位祖先元素的顶部和左侧的距离。如果元素没有定位的父元素，...
在实现这个特效时，我们需要掌握以下几个核心知识点： 1. **jQuery库**：jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画制作。在这个特效中，我们将利用jQuery的事件监听和DOM操作功能来跟踪页面...
首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框，但不包含外边距。如果元素有滚动条，滚动条也会被计算在内。 2. `clientWidth`...
2. **DOM元素位置获取**：使用`$(element).offset().top`可以获取DOM元素距离页面顶部的距离，这在判断元素是否进入视口时非常有用。 3. **CSS样式动态修改**：通过`$(element).css(property, value)`方法，可以在...
### JavaScript 高级...以上介绍了 JavaScript 高级前端开发中常用的几个 API 示例及其详细解析。这些 API 的掌握对于提高前端开发效率和提升用户体验具有重要意义。希望本文能对从事前端开发工作的朋友们有所帮助。
在实现这种滚动显示效果时，主要涉及到以下几个关键知识点： 1. **jQuery选择器**：jQuery提供了丰富的选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)等，用于选取我们需要操作的DOM元素。在实现...
### 对offsetLeft,offsetTop,scrollLeft,scrollTop几个方法的理解 在前端开发中，了解DOM元素的位置、大小以及滚动情况是非常重要的。`offsetLeft`, `offsetTop`, `scrollLeft`, `scrollTop`等属性可以帮助我们更好...