浏览器和对象的dom属性
1 DOM对象:var obj=document.getElementById('*');
obj.scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)
obj.clientWidth 是对象看到的宽度(不含border)。
obj.offsetWidth 是对象看到的宽度(含border,如滚动条的占用的宽) ;
*~* offsetWidth的值总是比clientWidth的值大;
offsetLeft、offsetTop属性:获取元素相对于文档左上角的坐标位置
标题:offsetTop 与 style.top 的区别
offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
offsetTop 只读,而 style.top 可读写。
如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
2 window对象:
1)innerHeight属性:窗口中文档显示区域的高度,不包括菜单栏、工具栏等部分。该属性可读可写。
IE不支持该属性,IE中body元素的clientHeight属性与该属性相同。
(2)innerWidth属性:窗口中文档显示区域的宽度,同样不包括边框。该属性可读可写。
IE不支持该属性,IE中body元素的clientWidth属性与该属性相同。
clientHeight与clientWidth属性是只读的。
另外,IE不支持outerWidth、outerHeight属性。
(3)pageXOffset属性:整数只读属性,表示文档向右滚动过的像素数。
IE不支持该属性,使用body元素的scrollLeft属性替代。
(4)pageYOffset属性:整数只读属性,表示文档向下滚动过的像素数。
IE不支持该属性,使用body元素的scrollTop属性替代。
兼容IE与DOM浏览器,如何获取窗口中文档显示区域的宽度及高度,使用?:条件语句,如下:
windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
网页可见区域宽: 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;
浏览器和对象的dom属性的更多相关文章
- HTML DOM 属性 对象
HTML DOM 属性 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是 节点: 文档是文档节点 所有 HTML 元素是元素节点 所 ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- dom对象常用的属性和方法有哪些?
dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 浏览器根对象window之值为字符串的属性
1. string属性 1.1 origin window.origin使用返回的是当前网页的网址.打开百度首页,并在控制台中输入 window.origin 控制台中会输出"https:/ ...
- javascript总结44: DOM对象的dataset属性方式
1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
随机推荐
- 外观(Facade)模式
外观模式:为子系统中的一组接口提供一个一致的界面.此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用 在软件开发中,有时候为了完成一项较为复杂的功能,一个客户类需要和多个业务类交互,而这些需 ...
- Linux rpm包安装MySQL数据库问题总结
1.安装包准备 2.按顺序安装以下安装包 一定要按顺序安装,因为前面的包是后面包的依赖 [root@iz2ze1bzpi3orra8lboxqiz mysql]# rpm -ivh Percona-S ...
- JAVA虚拟机关闭钩子(Shutdown Hook)
程序经常也会遇到进程挂掉的情况,一些状态没有正确的保存下来,这时候就需要在JVM关掉的时候执行一些清理现场的代码.JAVA中的ShutdownHook提供了比较好的方案. JDK提供了Java.Run ...
- 查看设备uuid的命令-blkid
查看设备uuid的命令-blkid 在关联/etc/fstab的时候可以使用 [root@mapper ~]# blkid /dev/sda1: UUID="285510be-b19 ...
- 01-TCP/IP概述
TCP/IP 概述 允许不同厂家的各种型号的计算机使用不同操作系统互相进行通信 真正的开放系统 "全球互联网"或"因特网"的基础 2.分层 网络协议通常分不同层 ...
- 智行火车票免费加速到VIP最高速抢票(不用朋友积攒或者购买加速包)
更新: 2018.11.07, 昨天我买火车票,已经不行了,这个bug已经没有了,被修复了, 望大家知悉!!! 智行火车票免费加速到VIP最高速抢票(不用朋友积攒或者购买加速包) 1)下过单后选择抢到 ...
- 13-001 ViewComponents IViewComponentActivator
接口定义: /// <summary> /// Provides methods to activate an instantiated ViewComponent /// </su ...
- Servlet(API)生命周期
一.最上层接口Servlet 查看Servlet接口源码: 有5个方法 访问过程(默认): 1.进行Servlet类加载 当Tomcat容器启动后,服务器寻找应用部署的描述文件(web.xml),从部 ...
- Hadoop分布式文件系统HDFS
HDFS的探究: HDFS HDFS是 Hadoop Distribute File System的缩写,是谷歌GFS分布式文件系统的开源实现,Apache Hadoop的一个子项目,HDFS基于流数 ...
- for循环中进行联网请求数据、for循环中进行异步数据操作,数据排序错乱问题解决;
for循环中进行联网请求数据,由于网络请求是异步的,第一个网络请求还没有回调,第二次第三次以及后续的网络请求又已经发出去了,有可能后续的网络请求会先回调:这时我们接收到的数据的排序就会错乱:怎么才能让 ...