笔记《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 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...
随机推荐
- SpringMVC参数绑定、Post乱码解决方法
从客户端请求key/value数据,经过参数绑定,将key/value数据绑定到controller方法的形参上. springmvc中,接收页面提交的数据是通过方法形参来接收.而不是在control ...
- MySQL操作数据库和表的基本语句（DDL
1.创建数据库: CREATE DATABASE 数据库名; eg.CREATE DATABASE test_ddl;122.创建表 CREATE TABLE 表名(列名 数据类型 约束,...); ...
- Django - Ajax初识
当需要在弹出的对话框中,做判断操作时,需要用到ajax 1.host.html <!DOCTYPE html><html lang="en"><hea ...
- swift 关键字willSet 和 didSet
// 下面是苹果给出的解释,就是在给属性设置新值的时候,可以在设置前和设置后做一些处理,这两个关键字就好像对该属性变化的监控 If you don’t need to compute the prop ...
- hdu 1584 蜘蛛纸牌
把小的牌放到大的牌上,求最小移动的距离和 DFS遍历所有的可能,把每一张牌与之要移动的牌都进行两层for的循环,注意回溯条件满足立刻break 代码(算法借鉴) #include <bits/s ...
- 数据类型与变量（Python学习笔记01）
数据类型与变量 Python 中的主要数据类型有 int(整数)/float(浮点数).字符串.布尔值.None.列表.元组.字典.集合等. None 每个语言都有一个专门的词来表示空,例如 Java ...
- 一个电商项目的Web服务化改造5：面向服务的分层架构设计(有图有真相)
最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA. 有点挑战,做完了,会有很大进步. 本篇,以我亲自画的3个图,阐述一下架构设计. 一.分层架构-总体图 ...
- 强悍的 ubuntu —— 命令行访问网页
所谓以命令行的方式访问网页,即是在终端下以文本的形式访问网站,这里推荐一个工具:w3m, $ sudo apt-get install w3m $ w3m www.baidu.com
- hdu 4975 最大流解决行列和求矩阵问题，用到矩阵dp优化
//刚开始乱搞. //网络流求解,如果最大流=所有元素的和则有解:利用残留网络判断是否唯一, //方法有两种,第一种是深搜看看是否存在正边权的环,见上一篇4888 //至少四个点构成的环,第二种是用矩 ...
- LightOJ - 1148 - Mad Counting
先上题目: 1148 - Mad Counting PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 3 ...