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属性的更多相关文章

  1. HTML DOM 属性 对象

    HTML DOM 属性 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是 节点: 文档是文档节点 所有 HTML 元素是元素节点 所 ...

  2. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  3. dom对象常用的属性和方法有哪些?

    dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...

  4. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 浏览器根对象window之值为字符串的属性

    1. string属性 1.1 origin window.origin使用返回的是当前网页的网址.打开百度首页,并在控制台中输入 window.origin 控制台中会输出"https:/ ...

  6. javascript总结44: DOM对象的dataset属性方式

    1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...

  7. 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  8. HTML DOM 对象 - 方法和属性

    一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...

  9. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

随机推荐

  1. 两招解决异常_Cannot find any information on property 'XXX' in a bean of type 'XXX'的问题

    第一招 在进行Java Web项目开发的时候,我碰到过下面这个异常: Cannot find any information on property 'XXX' in a bean of type ' ...

  2. react的echarts BizCharts

    react BizCharts react的饼图,折线图 点击进入官网 -> https://bizcharts.net/products/bizCharts/demo 如果你在这遇到了问题,欢 ...

  3. linux 系统下有sda和hda的硬件设备分别代表什么意思

    linux 系统下有sda和hda的硬件设备分别代表什么意思/dev/sda1 # SCSI设备,sda,sdb,sdc,三块盘,1,2,3代表分区(PV)/dev/sda2/dev/sdb1/dev ...

  4. 测试教程网.unittest教程.1. 基本概念

    From:http://www.testclass.net/pyunit/basic_concept/ unittest是python自带的单元测试框架,有时候又被称为”PyUnit”,是python ...

  5. 【java】之常用四大线程池用法以及ThreadPoolExecutor详解

    为什么用线程池? 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处-理效率2.线程并发数量过多,抢占系统资源从而导致阻塞3.对线程进行一些简单的管理 在Java中,线程池 ...

  6. web环境中微信JS-SDK配置

    一.公众号相关设置 首先,在公众号中进行JS安全域名的设置,在公众号设置-功能设置中选择JS接口安全域名,点击设置进入设置对话框.按照要求逐步进行,完成设置. 二.页面请求发送与处理 引入所需js: ...

  7. 使用 Spring Cloud 和 Docker 构建微服务架构

    如何使用Spring Boot.Spring Cloud.Docker和Netflix的一些开源工具来构建一个微服务架构. 本文通过使用Spring Boot.Spring Cloud和Docker构 ...

  8. php的语法

    常量:不变的量: php 设置常量的方法:define()方法: define("常量名","常量的值",true) 参数三:大小写是否敏感: php中的常量, ...

  9. 一次聊天引发的思考--java并发包

    一次聊天,谈到了死锁的解决.可重入锁等等,突然发现这些离自己很远,只有一些读书时的概念涌入脑海,但各自的应用场景怎么都无法想出.痛定思痛,决定看看concurrent包里涉及并发的类及各自的应用场景. ...

  10. [UE4]虚幻4 spline组件、spline mesh组件的用法

    最近公司项目需要,把这两个东东好好看了下.不得不说,这两个组件还是非常方便的,但是相关的介绍.教程却非常的少.它们概念模糊,用法奇特,我就总结下吧. 首先,先要明白spline component.s ...