笔记《javascript高级程序设计》 第12章 DOM2和DOM3

.png)

.png)
- document.defaultView.getComputedStyle(mydiv,:after / null) —— 此方法在IE9 以下浏览器中无法生效
- 在IE8及以下中可使用 .currentStyle 属性,来获取当前元素的样式

.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0; padding: 0; }
.waidiv{width: 600px; height: 700px; border: 6px #C0C0C0 solid;}
.py{width: 200px; height: 150px; background: #444; padding: 4px; margin: 10px; border: 5px #FF0000 solid;} .par1{ padding: 40px;}
.par2{ padding: 30px;}
</style>
</head>
<body>
<div class="par2">
<div class="par1">
<div class="waidiv">
<div id="py" class="py">偏移量测试</div>
</div>
</div>
</div>
<input type="button" value="元素宽" onclick="getEleWidth()"/>
<input type="button" value="元素高" onclick="getEleHeight()"/>
<input type="button" value="getOffsetLeft" onclick="getEleoffLeft()"/>
<input type="button" value="getOffsetTop" onclick="getEleoffTop()"/>
<input type="button" value="元素距浏览器顶部距离" onclick="getActualTop(document.getElementById('py'))"/>
<input type="button" value="元素距浏览器左距离" onclick="getActualLeft(document.getElementById('py'))"/> <script>
var py = document.getElementById("py");
function getEleWidth(){
alert(py.offsetWidth);
}
function getEleHeight(){
alert(py.offsetHeight);
}
function getEleoffLeft(){
alert(py.offsetLeft);
}
function getEleoffTop(){
alert(py.offsetTop);
}
function getActualLeft(element){
var actuaLeft = element.offsetLeft;
var current = element.offsetParent;
while( current !== null){
actuaLeft += current.offsetLeft;
current = current.offsetParent;
};
alert(actuaLeft);
} function getActualTop(element){
var actuaTop = element.offsetTop;
var current = element.offsetParent; while(current !== null){
actuaTop += current.offsetTop;
current = current.offsetParent;
}; alert(actuaTop);
} console.log()
</script>
</body>
</html>
混杂模式、标准模式下,scrollWidth、clientWidth、document.documentElement.scrollWidth、document.body.scrollWidth
对于混杂模式下IE 需要用 document.body代替document.documentElement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.testscroll{ width: 2000px; height: 1500px; background: #C0C0C0;}
</style>
</head>
<body>
<div class="testscroll" id="adiv"></div> <script>
var adiv = document.getElementById("adiv");
console.log("scrollWidth:"+document.documentElement.scrollWidth);
console.log("scrollHeight:"+document.documentElement.scrollHeight);
console.log("clientWidth:"+document.documentElement.clientWidth);
console.log("clientHeight:"+document.documentElement.clientHeight); function getWin(){
var mode = document.compatMode ;
// 是否处于标准模式
if(mode == "CSS1Compat"){
// 疑问:是不是现在浏览器版本变高,然后都同步了?
// 我测试过程中,谷歌、火狐、IE里clientWidth取到的都是视口宽度,书上说的谷歌scrollWidth为视口宽度
alert("可视区域宽度为:"+document.documentElement.clientWidth);
alert("可视区域高度为:"+document.documentElement.clientHeight); // 由于浏览器之间存在差异,以scrollWidth和clientWidth中求大值最靠谱
var docWin = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
var docHei = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
alert("标准模式下文档的宽度:"+docWin);
alert("标准模式下文档的宽度:"+docHei); }
// 是否处于混杂模式
else if(mode == "BackCompat"){
var docWin = Math.max(document.body.scrollWidth,document.body.clientWidth);
var docHei = Math.max(document.body.scrollHeight,document.body.clientHeight);
alert("混杂模式下文档的宽度:"+docWin);
alert("混杂模式下文档的宽度:"+docHei);
}
} window.onload = function(){
getWin();
}
</script>
</body>
</html>
笔记《javascript高级程序设计》 第12章 DOM2和DOM3的更多相关文章
- javascript高级程序设计第3版——第12章 DOM2与DOM3
12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...
- 《JavaScript高级程序设计》——第二章在HTML使用JavaScript
这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...
- JavaScript 高级程序设计 第5章引用类型 笔记
第五章 引用类型 一.object类型 1.创建方法: 1.使用new 操作符创建 var person=new object() Person.name=”Nicholasa” Porson.age ...
- JavaScript高级程序设计第20章JSON 笔记 (学习笔记)
第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5 表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...
- JavaScript高级程序设计第14章表单脚本 (学习笔记)
第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...
- 读书笔记 - javascript 高级程序设计 - 第一章 简介
第一章 简介 诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262 一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...
- 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript
1 <script>的6个属性 async 立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer 文档显示之后再执行脚本,只对外部脚本有效 lan ...
- javascript高级程序设计第三章的一些笔记
[TOC] 1. 语法 1.1 区分大小写 变量.函数名和操作费都区分大小写. 1.2 标识符 标识符指变量.函数.属性的名字,或者函数的参数.标识符按以下规则组合: 第一个字符必须是一个字母,下划线 ...
- 《JavaScript 高级程序设计》第一章:简介
JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...
随机推荐
- zabbix实现163邮件报警
Zabbix 邮件报警 电脑登录网易邮箱配置,把自己的授权码看一下,并写入配置文件 server端安装配置邮件服务器 [root@server ~]# yum -y install mailx dos ...
- 移动端rem布局 js
// rem布局适配 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in ...
- js 图表转图片
最近项目上有个需求,是将一些teechart做的图表转换成图片插入自动生成的PDF里,Teechart绘图和如何生成PDF这些这里就不说了,这个任务比较别扭的一点是,图表自动生成,且整个过程中页面不能 ...
- uva 540 (Team Queue UVA - 540)
又是一道比较复杂的模拟题.题中有两种队列,一种是总队列,从前向后.其他的是各个团体的小队列,因为入队的人如果有队友的话,会优先进入团体队列. 所以我们先设置两个队列和一个map,设置map倒是可以不用 ...
- Python基础-List找重复数
请从L=[1,10,20,50,20,20,1]中找出重复数. L=[1,10,20,50,20,20,1] L1=[] for i in L: if(L.count(i)>1): L1.app ...
- VI 快捷操作 【持续更新】
2014-9-23 一. 大小写转换 vim中大小写转化的命令是 gu或者gU 形象一点的解释就是小u意味着转为小写:大U意味着转为大写. 剩下的就是对这两个命令的限定(限定操作的行,字母,单词) ...
- 解决maven打包编译出现File encoding has not been set问题
maven打包编译时后台一直输出警告信息 [WARNING] File encoding has not been set, using platform encoding GBK, i.e. bui ...
- SQL 用户定义表类型,在存储过程里使用数据类型作參数
在数据库编程里使用数据类型,能够提高代码的重用性.它们常常被使用在方法和存储过程中.使用数据类型,我们能够避免在存储过程里定义一串的參数,让人眼花缭乱,它就相当于面向对象语言里.向一个方法里传入一个对 ...
- MySQL 调优 —— Using filesort
出现这个问题的解决办法在于 MySQL 每次查询仅仅能使用一个索引, 而你的 SQL 语句 WHERE 条件和 ORDER BY 的条件不一样, 索引没建好的话. 那么 ORDER BY 就使用不到索 ...
- 【cocos2d-x 3.7 飞机大战】 决战南海I (十) 游戏主场景
主场景要包括其它类的头文件 #include "cocos2d.h" #include "MyPlane.h" #include "Bullet.h& ...