top、postop、scrolltop、scrollHeight、offsetHeight

网页可见区域宽:document.body.clientWidth;   
网页可见区域高:document.body.clientHeight;   
网页可见区域高:document.body.offsetWeight:   
网页可见区域高: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;

scrollWidth
是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)

clientWidth
是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

offsetWidth
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。


------------------------------------------------
一个scrollWidth和clientWidth的例子:
<html>
<head>
<title>77.htm文件</title>
</head>

<body>
<textarea wrap="off" οnfοcus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。
当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。
scrollWidth是对象实际内容的宽度。
clientWidth是对象看到的宽度(不含边线),这个例子里不会改变。


-----------------------------------------------
一个clientWidth和offsetWidth的例子:
<html>
<head>
<title>77.htm文件</title>
</head>

<body>
<textarea wrap="off" οnfοcus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>

offsetWidth的值总是比clientWidth的值打
clientWidth是对象看到的宽度(不含边线)
offsetWidth是对象看到的宽度(含边线,如滚动条的占用的宽)

top、postop、scrolltop、scrollHeight、offsetHeight

1. top

此属性仅仅在对象的定位(position)属性被设置时可用。否则,此属性设置会被忽略。

<div style="background-color:red; position:absolute; width:100px; height:100px;">

<p style="background-color:silver; position:absolute; top:-5px;">测试top</p>

</div>

 

上面是一个段落P包含在一个DIV内,可以看到P的top设置为-5px后,它的上边距超过了容器DIV的上边距,超过的这段距离就是设置的5px。

需要注意的是,DIV和P这一对包含元素,都需要设置position为absolute才能得到想要的结果,假如父元素不设置,则子元素的参照将是更上层定义过position的元素,直到整个文档;

2. posTop

posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而posTop只是一个数值(这一点可以通过alert("top="+id.style.top)和alert("posTop="+id.style.posTop)来证明),因此一般使用posTop来进行运算。

<div style="background-color:red; position:absolute; width:100px; height:100px;">

<p id="test" style="background-color:silver; position:absolute;">测试posTop</p>

</div>

<script>
test.style.posTop
= 15+8;
alert(
"top="+test.style.top);
alert(
"posTop="+test.style.posTop);
</script>

 

无论你使用top或posTop来赋值,最后的结果都是一致的

3. scrollTop

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
</p>
</div>

<script>
container.scrollTop
= 12;
</script>

 

这一段文本在这个100*100的DIV内无法完全显示,所以设置了overflow为auto,它会出现一个上下方向的滑动框,假如没有设置id.scrollTop属性的话,默认情况下滑块位置在顶端。而设置了scrollTop值为12后,滑块的位置改变了,默认显示是卷过了12个象素的文本。如果设置overflow为hidden,则将会无法显示顶部12个象素的文本。

注意设置方式是id.scrollTop,而不是id.style.scrollTop。

4. scrollHeight 与 offsetHeight

offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度。

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
</p>
</div>

<script>
alert(container.offsetHeight);
alert(container.scrollHeight);
</script>

 

将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为100+150=250。

转载于:https://www.cnblogs.com/aaa6818162/archive/2009/10/30/1592855.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/496172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Effective Java~34. 用enum 代替 int 常量

在将枚举类型添加到该语言之前&#xff0c;表示枚举类型的常见模式是声明一组名为 int 的常量&#xff0c;每个类型的成员都有一个常量&#xff1a; // The int enum pattern - severely deficient! public static final int APPLE_FUJI 0; public static final int APPLE_…

linux 计算集群搭建,使用centos构建服务器计算集群

yum源的搭建排除列表#新建文件[rootcentos-test ~]# vim /usr/local/local_mirror/exclude.list#填入内容SRPMSaarch64ppc64ppc64ledebugrepodataEFILiveOSimagesisolinuxCentOS_BuildTagEULAGPLRPM-GPG-KEY-CentOS-7RPM-GPG-KEY-CentOS-Testing-7drpmsshell同步脚本#建立文件[…

展望2021年:智能机器人可监督工业机器人干活,效率提升30%

来源&#xff1a;极客网会帮我们吸地板、在公共场所担任导引员或是拆除炸弹的机器人呢可能感觉比较有趣&#xff0c;但那些负责组装汽车以及在工厂生产在线帮忙拾取物品的机器人&#xff0c;在整体价值上要高得多&#xff0c;而且也有越来越多的工/商业或消费性应用产品是由这种…

ASP。NET的设计思想

自从有了html与http&#xff0c;就有了浏览器与Web服务器&#xff0c;并有了Web应用&#xff0c;最初的交互模式是这样的&#xff1a; 该模式很好地运行了很多年。然而&#xff0c;随着计算机应用的发展&#xff0c;人们越来越不满足于只有静态内容的页面&#xff0c;而由某种机…

Kali linux 渗透测试技术之搭建WordPress Turnkey Linux及检测WordPress 应用程序漏洞

From&#xff1a;https://bbs.ichunqiu.com/thread-15716-1-1.html 怎样用 WPScan&#xff0c;Nmap 和 Nikto 扫描和检查一个 WordPress 站点的安全性&#xff1a;https://www.cnblogs.com/chayidiansec/p/7989274.html 为了收集用于测试的应用程序&#xff0c; Turnkey Linux…

AI芯片格局分布

来源&#xff1a;中国科学院自动化研究所 作者&#xff1a; 吴军宁如果说2016年3月份AlphaGo与李世石的那场人机大战只在科技界和围棋界产生较大影响的话&#xff0c;那么2017年5月其与排名第一的世界围棋冠军柯洁的对战则将人工智能技术推向了公众视野。阿尔法狗&#xff08;…

linux screen -ls,Linux screen命令详解

Linux下screen主要是管理程序的&#xff0c;用screen管理的进程可以在用户断开连接的时候保持程序继续在服务器上运行。第一步&#xff1a;首先肯定是登录到linux服务器上。敲入screen -ls 命令可以看到服务器上已有的screen。用screen -S(s的大写)screen名称可以创建一个scree…

自动处理可载入模块命令 modprobe

From&#xff1a;https://blog.csdn.net/good5101/article/details/39472291 linux内核模块相关命令&#xff1a;lsmod,depmod,modprobe,modinfo,insmod,rmmod 使用说明https://www.cnblogs.com/jacklikedogs/p/4659249.html Linux下加载.ko驱动模块的两种方法&#xff1a;insm…

Effective Java~35. 用实例域代替序数

许多枚举通常与单个 int 值关联。所有枚举都有一个 ordinal 方法&#xff0c;它返回每个枚举常量类型的数值位置。你可能想从序数中派生一个关联的 int 值&#xff1a; // Abuse of ordinal to derive an associated value - DONT DO THIS public enum Ensemble {SOLO, DUET, …

史上最牛房屋中介

“没钱就不要学人家买房。” “你不要跟他解释&#xff0c;你跟他说也没用。” “你买的房子在哪我也知道&#xff0c;你有老人孩子&#xff0c;你总有不在家的时候吧&#xff1f;”这是我和老婆买房的亲身经历&#xff0c;上海汉居房地产中介老板的雷人语录。1. 看完房子后到中…

科学互驳:大脑细胞活到老,长到老?

来源&#xff1a;中国生物技术网 作者&#xff1a;格格科学家发现&#xff0c;人脑中与学习、记忆和情感相关的区域在成年后依然会持续产生新的神经元。这与过去的理论恰恰相反&#xff0c;即青春期之后大脑停止产生新的神经元。这项发现有助于我们开发治疗神经系统疾病的新方…

linux非阻塞通话编程,linux 非阻塞式socket编程求助。。

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼一下客户端&#xff1a;#include#include#include#include#include#include#include#include#include#include#include#define MAXDATASIZE 256#define SERVPORT 4444#define STDIN 0int main(void){int sockfd;int recvbytes;char…

Linux 环境变量配置

From&#xff1a;https://www.linuxidc.com/Linux/2015-08/121192.htm .bash_profile和.bashrc的区别(如何设置生效)&#xff1a;https://www.cnblogs.com/persist/p/5197561.html Linux中环境变量包括系统级和用户级&#xff0c;系统级的环境变量是每个登录到系统的用户都要读…

Effective Java~36. 用EnumSet 代替位域

如果枚举类型的元素主要用于集合中&#xff0c;一般来说使用 int 枚举模式&#xff08;条目 34&#xff09;&#xff0c;下面将 2 的不同倍数赋值给每个常量&#xff1a; // Bit field enumeration constants - OBSOLETE! public class Text {public static final int STYLE_B…

在ACCESS中使用Group By语句

这样写不行&#xff0c;认为金额是一个变量 SELECT 编号, sum(本金) AS 金额 FROM sk GROUP BY 编号 ORDER BY 金额 只有这样 select * from (SELECT 编号, sum(本金) AS 金额 FROM sk GROUP BY 编号) ORDER BY 金额转载于:https://www.cnblogs.com/vincentfeng/archive/2009/1…

AI综述专栏 | 朱松纯教授浅谈人工智能:现状、任务、构架与统一

作者&#xff1a;朱松纯来源&#xff1a;人工智能前沿讲习班导读本文作者&#xff1a;朱松纯&#xff0c;加州大学洛杉矶分校UCLA统计学和计算机科学教授&#xff0c;视觉、认知、学习与自主机器人中心主任。文章前四节浅显探讨什么是人工智能和当前所处的历史时期&#xff0c;…

linux的grub损坏,如何利用Grub命令启动损坏的Linux系统?

能你的电脑因为某些原因损坏不能自动启动了。当然原因很多&#xff0c;可能的现象也很多。这里说一下这种情况下的处理方法&#xff0c;即&#xff1a;屏幕上提示 “ grub> ” &#xff0c;但你的硬盘上数据没有丢失&#xff0c;各分区都是好的。这种情况是你的 grub 信息损…

.net打包自动安装数据库

一).创建部署项目 1. 在“文件”菜单上指向“添加项目”&#xff0c;然后选择“新建项目”。 2. 在“添加新项目”对话框中&#xff0c;选择“项目类型”窗格中的“安装和部署项目”&#xff0c;然后选择“模板”窗格中的“安装项目”。在“名称”框中键入 setup1。 3. 单击“确…

Effective Java~37. 用EnumMap 代替序数索引

有时可能会看到使用 ordinal 方法&#xff08;条目 35&#xff09;来索引到数组或列表的代码。 例如&#xff0c;考虑一下这个简单的类来代表一种植物&#xff1a; class Plant {enum LifeCycle { ANNUAL, PERENNIAL, BIENNIAL }final String name;final LifeCycle lifeCycle;…

Python操作MSSQL

Python连接SQL Server数据库 - pymssql使用基础&#xff1a;https://www.cnblogs.com/baiyangcao/p/pymssql_basic.html 廖雪峰官网 之 Python 访问数据库&#xff08;SQLLite / MySQL / SQLAlchemy&#xff09; pymssql examples &#xff1a;http://pymssql.org/en/stable/p…