JS之DOM操作中的页面布局

1. document.body.clientWidth ==> BODY对象宽度  
2. document.body.clientHeight ==> BODY对象高度  
3. document.documentElement.clientWidth ==> 可见区域宽度  
4. document.documentElement.clientHeight ==> 可见区域高度  
5.   
6. 网页可见区域宽: document.body.clientWidth  
7. 网页可见区域高: document.body.clientHeight  
8. 网页可见区域宽: document.body.offsetWidth (包括边线的宽)  
9. 网页可见区域高: document.body.offsetHeight (包括边线的高)  
10. 网页正文全文宽: document.body.scrollWidth  
11. 网页正文全文高: document.body.scrollHeight  
12. 网页被卷去的高: document.body.scrollTop  
13. 网页被卷去的左: document.body.scrollLeft  
14. 网页正文部分上: window.screenTop  
15. 网页正文部分左: window.screenLeft  
16. 屏幕分辨率的高: window.screen.height  
17. 屏幕分辨率的宽: window.screen.width  
18. 屏幕可用工作区高度: window.screen.availHeight  
19. 屏幕可用工作区宽度: window.screen.availWidth  
20.   
21. // 部分jQuery函数  
22. $(window).height()  //浏览器时下窗口可视区域高度   
23. $(document).height()    //浏览器时下窗口文档的高度   
24. $(document.body).height()      //浏览器时下窗口文档body的高度   
25. $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin   
26. $(window).width()  //浏览器时下窗口可视区域宽度   
27. $(document).width()//浏览器时下窗口文档对于象宽度   
28. $(document.body).width()      //浏览器时下窗口文档body的高度   
29. $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding  
30.   
31. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth   
32. scrollHeight: 获取对象的滚动高度。   
33. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
34. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离   
35. scrollWidth:获取对象的滚动宽度   
36. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度   
37. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置   
38. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
39. event.clientX 相对文档的水平座标   
40. event.clientY 相对文档的垂直座标   
41. event.offsetX 相对容器的水平坐标   
42. event.offsetY 相对容器的垂直坐标   
43. document.documentElement.scrollTop 垂直方向滚动的值   
44. event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

时间: 2025-01-31 07:33:41

JS之DOM操作中的页面布局的相关文章

JS动态更新HTML5 APP页面的结构(包括功能和布局)

HTML5 APP开发算是越来越流程了.当然,开发这样的HTML5 APP有什么好处呢.笔者认为:可以通过后台JS动态更新HTML5 APP页面的结构,是一大优势. 那如何实现该功能呢. 首先,得知道其原理:为什么可以通过后台JS就可以更新前台APP. 接着,得知道操作步骤是怎样的. 详细内容,可以查看如下链接: HTML5 APP 实现后台JS更新APP前端页面功能 HTML5 APP开发之动态调整页面布局 如需要源码,请@我 (一份完整的源代码,收费1元)

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

CSS3与页面布局学习笔记(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

JS性能DOM优化

什么是DOM?  用于操作XML和HTML文档的应用程序 Dom节点  2. Dom树   3.Dom API DOM优化 浏览器会把js和dom独立实现,js每次操作dom,都会增加一次耗时,为了提高dom性能,就要尽可能减少js对dom的操作, 以下是两个测试 1 <script> 2 window.onload=function(){ 3 var div=document.getElementById('div'); 4 var str=''; 5 console.time('test1

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

CSS3与页面布局学习总结(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

常用页面布局分享

1. 页面常用布局 常用的页面布局方式主要有:浮动,弹性盒子,定位,设置表格模式,行内与块级相结合. 布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意 清除浮动 设置自适应子容器与父容器 嵌套使用,各中关系 内容会自适应 效果有局限性,行内块之间有缝隙 1.1.浮动布局(Float) 值 描述 left 元素向左浮动. right 元素向右浮动. none 默认值.元素不浮动,并会显示在其在

一步一步构建手机WebApp开发——页面布局篇

继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接上代码 注意:此教程是接上一篇教程,也就是所有的内容是直接从body开始写,当然,也会贴出所有代码给大家. 第一步:框架的布局及幻灯片的布局(Html) ① 如上图所示,我们应该准备以下容器,方便填充内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

为什么说js操作DOM很慢

为什么说js操作DOM会影响性能呢? 在浏览器中DOM得实现和ECMAScript是分离得. 在IE中EMCMAScript是实现在jscript.dll中,DOM实现在mshtml.dll中.在Chrome中使用Webkit中的WebCore处理DOM和渲染,ECMAScript是在V8引擎中实现的.其他浏览器也类似. 因此在使用js操作DOM的时候是通过js代码调用DOM的接口,这就相当于两个互相独立的模块发生交互,这样的性能损耗是非常高的. 然后影响DOM操作性能的主要原因是它会导致浏览器