`
vern
  • 浏览: 16744 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

client,offset,scroll,style,margin,padding

阅读更多

client,offset,scroll,style,margin,padding

 

<head>
<title>51windows.Net </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
</style>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽)";
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>
</body>
</html>
<head>
<title>51windows.Net </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
</style>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽)";
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>
</body>
</html>
来自: http://hi.baidu.com/qqlm/blog/item/210e47a9d515d7fc1e17a21b.html

分享到:
评论

相关推荐

    三剑客:offset、client和scroll还傻傻分不清?

    在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内...

    05-offset,scroll,client.html

    05-offset,scroll,client.html

    js中offset,client , scroll 三大元素知识点总结

    本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族:offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息,窗口或元素内部的滚动距离等重要数据,对于实现页面布局和交互功能至关重要...

    javascript的offset、client、scroll使用方法详解

    JavaScript中的`offset`、`client`和`scroll`是一组用于获取和操作页面元素位置及大小的重要属性。这些属性在Web开发中非常常见,尤其是在处理动态布局和交互时。下面将详细讲解这些属性的含义、用途及其在不同...

    javascript中offset、client、scroll的属性总结

    JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素...在JavaScript中处理元素尺寸和位置时,了解并正确使用offset、client和scroll属性至关重要,它们可以帮助我们创建更加动态和响应式的网页界面。

    Web前端开发技术-client和scroll应用.pptx

    Web前端开发技术中,`client` 和 `scroll` 属性是JavaScript中用于处理元素可视区和滚动行为的关键概念。这两个属性对于创建动态交互的网页至关重要,尤其在设计浮动广告或其他需要响应用户滚动行为的场景中。 1. *...

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    滚动样式「scroll style」-crx插件

    Like android's scroll bars. 像android的滚动条。Forked from onlywsx's extension. 移植自onlywsx的原扩展 Like a scroll bar in the android, activity display the scroll bar, usually when they don't show, ...

    JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结

    主要介绍了JS前端知识点offset,scroll,client,冒泡,事件对象的应用,结合实例形式总结分析了offset,scroll,client,冒泡,事件对象相关功能、原理及操作注意事项,需要的朋友可以参考下

    微信小程序 scroll-view滚动到底部事件不触犯的锅

    .scrollStyle{ width: 100%; height: 100%; display: flex; flex-direction: column; } 居然无效,修改height为具体高度也无效. 然后我在 style里设置height为200px,居然生效了: &lt;scroll

    使用scroll,translation,margin三种滑动效果的对比

    View滑动效果常用属性详解:scroll、translation、LayoutParams代码 http://blog.csdn.net/Holmofy/article/details/53959511

    javascript必修课_offset,client,scroll家族

    本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。...最后我们还会学习Jquery框架,以提高你的前端开发效率。学完本课后,你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站...

    unity自制scroll view面板,scroll bar 可一拖动drag

    在“unity自制scroll view面板,scroll bar可一拖动drag”这个项目中,开发者创建了一个自定义的Scroll View组件,并实现了拖放(drag)功能,使得用户可以通过直接拖动scroll bar来滚动内容。这大大提高了用户体验...

    delphi ScrollBox支持滚轮

    在Delphi编程环境中,ScrollBox组件是一个非常实用的控件,它允许开发人员创建具有滚动功能的用户界面。ScrollBox通常被用作一个容器,可以包含多个其他控件,当这些控件的数量或大小超过屏幕显示范围时,ScrollBox...

    Scroll Reverse

    标题“Scroll Reverse”所指的是一个针对MacOS操作系统的应用程序,它的主要功能是解决用户在使用鼠标滚轮或触控板滚动时感到不便的问题。在MacOS系统中,默认情况下,滚轮向上滚动会向下移动页面,这与许多Windows...

    js中的scroll和offset 使用比较的实例与分析.docx

    在JavaScript中,`scroll`和`offset`是两个重要的概念,它们主要用于获取和操作网页元素的位置和滚动状态。本文将详细解析这两个概念以及它们的区别。 首先,`offset`属性主要包含`offsetTop`, `offsetLeft`, `...

    delphi-ScrollBox1判断Panel的位置

    在Delphi编程中,ScrollBox控件常用于创建可滚动的区域,用户可以在其中放置其他控件,如Panels。ScrollBox提供了灵活的布局管理,允许用户在需要时滚动查看内容。本文将深入探讨如何在Delphi中判断Panel在ScrollBox...

Global site tag (gtag.js) - Google Analytics