


网页可见区域宽: 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;
1、offsetLeft 假设 obj 为某个 HTML 控件。 2. clientHeight 3、scrollLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,可以理解为边框的长度
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如:
The offsetTop of the "Submit" button refers to the distance between the "Submit" button and the upper border of the "tool" layer, because the closest to it is the upper border of the "tool" layer.
The offsetTop of the "Reset" button refers to the distance between the "Reset" button and the upper border of the "tool" layer, because the closest to it is the upper border of the "tool" layer.
The offsetLeft of the "Submit" button refers to the distance between the "Submit" button and the left border of the "tool" layer, because the closest to its left is the left border of the "tool" layer.
The offsetLeft of the "Reset" button refers to the distance of the "Reset" button from the right border of the "Submit" button, because the closest to its left is the right border of the "Submit" button.
The above properties are also valid in FireFox.
In addition: what we are talking about here refers to the attribute value of the HTML control, not document.body. The value of document.body has different interpretations in different browsers (actually most Most situations are caused by different interpretations of document.body, not by different interpretations of offset), click here to view the differences.
Title: The difference between offsetTop and style.top
Preliminary knowledge: offsetTop, offsetLeft, offsetWidth, offsetHeight
We know that offsetTop can get the position of the HTML element from the top or outer element, style.top can also be used, the difference between the two is:
1. offsetTop returns a number , and style.top returns a string, in addition to numbers, it also has the unit: px.
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
标题:clientHeight、offsetHeight和scrollHeight
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里查看。
这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
No one has any objections to clientHeight. They all agree. It is the height of the visible area of the content, which means the height of the area where the content can be seen in the page browser. It is generally the area from below the last toolbar to above the status bar, and has nothing to do with the page content.
offsetHeight
IE and Opera consider offsetHeight = clientHeight scroll bar border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.
scrollHeight
IE and Opera believe that scrollHeight is the actual height of the web page content and can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of the web page content, but the minimum value is clientHeight.
Simply put
clientHeight is the height of the area where the content is viewed through the browser .
NS and FF believe that offsetHeight and scrollHeight are both the height of the web page content, but when the height of the web page content is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
标题:scrollTop、scrollLeft、scrollWidth、scrollHeight
scrollTop 是“卷”起来的高度值,示例:
var p = document.getElementById("p");
p.scrollTop = 10;
Since scrollTop is set for the outer element p, the inner element will go up roll.
scrollLeft is similar .
We already know that offsetHeight is the width of its own element .
And scrollHeight is the absolute width of the inner element, including the hidden part of the inner element.
In the above, the scrollHeight of p is 300, and the offsetHeight of p is 100.
scrollWidth is similar.
IE and FireFox fully support, while Netscape and Opera do not support scrollTop and scrollLeft (except document.body).
发表时间:2007-10-15 20:20:16
标题:offsetTop、offsetLeft、offsetWidth、offsetHeight
4、clientLeft
一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了一天的时间好好的学习了一下.得出了以下的结果:
1.offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :The difference between
and the style.height attribute is that if the width of the object is set to a percentage height, no matter the page becomes larger or smaller, style.height will return this percentage, while offsetHeight will return a different page. The height value of the object in the object instead of the percentage value
5.offsetParent :
The parent layer object of the current object.
Note. If the object is included in a DIV, the DIV will not be regarded as the upper level of the object (that is, the upper level of the object will skip the DIV object). If the upper level is a Table, there will be no problem.
Using this attribute, you can get the absolute position of the current object in pages of different sizes.
Get absolute position script code
function GetPosition(obj)
{
var left = 0;
var top = 0;
while(obj != document.body)
{
left = obj.offsetLeft;
top = obj.offsetTop;
obj = obj.offsetParent;
}
alert("Left Is : " left "rn" "Top Is : " top);
}
6.scrollLeft:
현재 창에 표시된 범위 내에서 개체의 가장 왼쪽부터 개체의 왼쪽까지의 거리입니다.
즉, 가로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.
7.scrollTop
현재 창에 표시되는 범위 내에서 개체의 상단에서 개체의 상단 가장자리까지의 거리입니다.
즉, 세로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.
여기에서는 document.body의 clientHeight, offsetHeight 및 scrollHeight를 HTML 컨트롤인 경우에 대해 설명합니다. 여기 확인하세요.
4가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox)입니다.
clientHeight
clientHeight에 대해 누구도 이의를 제기하지 않습니다. 그들은 모두 콘텐츠가 보이는 영역의 높이, 즉 콘텐츠가 보이는 영역의 높이라고 생각합니다. 페이지 브라우저는 일반적으로 표시줄 아래부터 상태 표시줄 위까지의 영역은 페이지 콘텐츠와 관련이 없습니다.
offsetHeight
IE와 Opera는 offsetHeight = clientHeight 스크롤 막대 테두리를 고려합니다.
NS와 FF는 offsetHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.
scrollHeight
IE와 Opera는 scrollHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.
NS와 FF는 scrollHeight를 웹페이지 콘텐츠의 높이로 간주하지만 최소값은 clientHeight입니다.
간단히 말하면
clientHeight는 브라우저를 통해 콘텐츠가 보이는 영역의 높이입니다.
NS와 FF는 offsetHeight와 scrollHeight가 모두 웹페이지 콘텐츠 높이라고 생각하지만, 웹페이지 콘텐츠 높이가 clientHeight보다 작거나 같은 경우 scrollHeight 값은 clientHeight이고 offsetHeight는 clientHeight보다 작을 수 있습니다.
IE와 Opera는 offsetHeight가 가시 영역 clientHeight 스크롤 막대와 테두리라고 믿습니다. scrollHeight는 웹페이지 콘텐츠의 실제 높이입니다.
마찬가지로
clientWidth, offsetWidth, scrollWidth에 대한 설명은 위와 동일하며 높이를 너비로 바꾸면 됩니다.
설명
위 내용은 DTD HTML 4.01 Transitional을 기준으로 한 것입니다. DTD XHTML 1.0 Transitional이라면 의미가 달라지겠지만, XHTML에서는 이 세 값이 모두 같은 값입니다. 콘텐츠의 실제 높이를 나타냅니다. 대부분의 새 버전의 브라우저는 페이지에 지정된 DOCTYPE을 기반으로 다양한 해석기 활성화를 지원합니다. 테스트 파일을 다운로드하거나 찾아보세요.

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind

Enhance Your Code Presentation: 10 Syntax Highlighters for Developers Sharing code snippets on your website or blog is a common practice for developers. Choosing the right syntax highlighter can significantly improve readability and visual appeal. T

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

This article presents a curated selection of over 10 tutorials on JavaScript and jQuery Model-View-Controller (MVC) frameworks, perfect for boosting your web development skills in the new year. These tutorials cover a range of topics, from foundatio

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver CS6
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
