关于位置的js代码大礼包～

最新推荐文章于 2025-12-02 22:10:11 发布
原创 最新推荐文章于 2025-12-02 22:10:11 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #xhtml #javascript #工作 #web

本文提供了一段JavaScript代码，用于获取网页的各种尺寸信息，包括可见区域的宽高、正文的宽高及滚动位置等。同时，针对document.body.scrollTop始终为0的问题，给出了两种解决方案。

 这次很全～～几乎全部都有了～～附带scrollTop为0的解决办法～～

< html >
< body >
< SCRIPT  LANGUAGE ="JavaScript" >

var  s = "";

s += " 网页可见区域宽："+ document.body.clientWidth;

s += " 网页可见区域高："+ document.body.clientHeight;

s += " 网页可见区域宽："+ document.body.offsetWidth  +" (包括边线和滚动条的宽)";

s += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += " 网页正文全文宽："+ document.body.scrollWidth;

s += " 网页正文全文高："+ document.body.scrollHeight;

s += " 网页被卷去的高："+ document.body.scrollTop;

s += " 网页被卷去的左："+ document.body.scrollLeft;

s += " 网页正文部分上："+ window.screenTop;

s += " 网页正文部分左："+ window.screenLeft;

s += " 屏幕分辨率的高："+ window.screen.height;

s += " 屏幕分辨率的宽："+ window.screen.width;

s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;

s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

alert(s);

 </ SCRIPT >  
 </ body >
</ html >


关于document.body.scrollTop一直为0的解决办法～这个是个兼容问题～前面有讲过 这里再重新说一下～～

解决办法～～～
=1=
去掉<!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">

这样的web标准语句,因为加上后会让document.body.scrollTop一直为0

=2=
写成:document.documentElement.scrollTop


冰蓝2099
关注
JavaScript-端午节大礼包
06-01
这个JavaScript端午节大礼包，旨在通过实践案例，帮助开发者巩固和提升JavaScript的相关技能，同时增加了一些节日的趣味性。通过学习和解析这些文件，不仅能够提升技术能力，还能感受到编程的乐趣。
低代码可视化拖拽编辑器实现方案
xuxian的博客
06-25 2753
随着业务不断发展，低代码、无代码平台越来越常见，它降低开发门槛、快速响应业务需求、提升开发效率。零开发经验的业务人员通过可视化拖拽等方式，即可快速搭建各种应用。本文主要是讲解低代码可视化拖拽平台前端展示层面的实现逻辑和方案，对于后端逻辑、数据库设计、以及自动化部署等暂时没有涉及。
Leetcode 638. 大礼包
weixin_53526046的博客
12-21 194
【代码】Leetcode 638. 大礼包。
OJ刷题--大礼包（C++含输入输出完整代码）
qq_44258878的博客
02-07 489
OJ刷题--大礼包（C++含输入输出完整代码）
Docker指令合集大礼包
不想写代码的程序猿
08-05 215
之前的文章介绍过如何使如何编写Dockerfile及如何使用docker-compose.yml来自动化生成和部署容器 今天主要来介绍一下docker中常用的指令，如下： 1. docker create/run create是生成一个容器但是不运行，而run的话是生成之后同时运行它 docker create/run [OPTIONS] IMAGE [COMMAND] [ARG...] 这里OPTIONS有很多选择，如下： -a stdin:指定标准输入输出内容类型，可选 STDI..
6个Python大礼包，请查收（附源码）
ch950401的博客
05-09 201
！学习python技术，掌握第一手更新文档。
6个Python大礼包，请查收！
程序员小麦的博客
01-15 1658
！
Sublime Text 3 开发环境优化大礼包
weixin_28999139的博客
08-11 965
Sublime Text 3允许用户自定义语法高亮规则，以适应个人喜好或特定的项目需求。要创建自定义的语法高亮规则，用户需要创建一个新的语法包，并编辑其语法文件。语法文件是一个名为的XML文件，用户可以使用Sublime Text 3内置的语法高亮编辑器来编辑它。例如，如果你想要改变HTML标签的颜色，可以按照以下步骤操作：打开Sublime Text 3，选择。填写语法名称和文件扩展名，然后保存该文件。在新的语法文件中，找到部分。在。
【Vue】 前端代码风格指南--代码规范
DomCode
07-09 1832
前端代码规范
新年网站模板及图片素材大礼包
- SEO优化：对网站进行搜索引擎优化（SEO），确保在节日期间网站内容能够出现在搜索引擎结果的靠前位置，吸引更多的潜在客户。 以上知识点涵盖了新年网站模板和图片素材的使用、网页模板的开发流程、服务器类网页...
基于jQuery的两款简易转盘抽奖代码实现
“两款简单的jQuery转盘抽奖代码”是一套基于前端技术实现的网页抽奖系统，主要用于模拟现实中的幸运大转盘抽奖机制。该压缩包中包含的文件（index.html、jquery.wheelOfFortune.js、static）共同构成一个完整可运行...
DW大学生网页作业制作设计 ——旅游门户网站（21页）HTML+CSS+JavaScript
Q_2709137139的博客
08-12 813
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页.
leetcode 638. 大礼包-思路整理
闯入网络安全的数据分析小白
12-07 1012
leetcode 638大礼包的思路笔记
免费国产低代码平台来啦，先到先得
LowCode_的博客
04-20 4478
概要： （1）免费领低代码平台 （2）天翎低代码开发平台 在寻找低代码平台吗？这里有个优秀国产低代码平台，天翎MyApps平台正式上线了会员系统，用户在会员中心（https://mall.teemlink.com/）注册会员之后，即可免费获取MyApps低代码平台-社区版。 该社区版不限部署不限并发不限用户数，平台功能没有任何阉割，而且免费向用户提供安装手册、操作手册以及操作视频等配套资料，并开放技术论坛与群聊供用户参与讨论。 天翎低代码开发平台 这是一个怎样的低代码平台呢？它具
vue2/html 实现高德点聚合
m0_49789433的博客
12-02 53
1.vue2 高德点聚合。2.html高德点聚合。这里要换成自己的key。这里换成自己的key。
【HTML Living Standard 01】HTML基础概述
风高秋月白，雨霁晚霞红
12-01 607
HTML-01 基础概念相关。
HTML DOM 对象
最新发布
wjs2024的博客
12-02 239
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
【JavaWeb】HTML常见标签——标题段落和换行
qq_43494013的博客
12-02 87
【JavaWeb】HTML常见标签——标题段落和换行
HTML 基础
wjs2024的博客
12-02 234
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值