笔记《javascript高级程序设计》 第12章 DOM2和DOM3
- document.defaultView.getComputedStyle(mydiv,:after / null) —— 此方法在IE9 以下浏览器中无法生效
- 在IE8及以下中可使用 .currentStyle 属性,来获取当前元素的样式
<!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 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...
随机推荐
- 【剑指Offer】剑指offer题目汇总
本文为<剑指Offer>刷题笔记的总结篇,花了两个多月的时间,将牛客网上<剑指Offer>的66道题刷了一遍,以博客的形式整理了一遍,这66道题属于相对基础的算法题目,对于 ...
- What is the difference between rhel 6 and rhel7
What is the difference between rhel 6 and rhel7 difference rhel 6 RHEL 7 release date 10 NOV 2010 as ...
- 3.Linux的远程管理及网络下载
3.1 Linux的远程管理 3.1.1 远程管理概述 什么是远程管理: 1.为什么需要远程管理: 服务器通常是Linux系统,而服务器不可能一直在身边,所以就需要远程来操作服务器 企业中通常需要集群 ...
- 洛谷——P2504 [HAOI2006]聪明的猴子
P2504 [HAOI2006]聪明的猴子 题目描述 在一个热带雨林中生存着一群猴子,它们以树上的果子为生.昨天下了一场大雨,现在雨过天晴,但整个雨林的地表还是被大水淹没着,部分植物的树冠露在水面上. ...
- The meaning of the number displayed on the man page in Linux
0 Header files 0p Header files (POSIX) 1 Executable programs or shell commands 1p Executable program ...
- 仿探探卡片滑动vue封装并发布到npm
项目初始化使用 webpack-simple 方式比较方便和容易配置,原来的方式各种坑慎入 vue init webpack-simple vue-card-slide cd vue-card-sli ...
- 远程连接工具putty与mtputty
PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件 官网 http://www.chiark.greenend.org.uk/~sgtatham/putty/ putty ...
- [TS-A1487][2013中国国家集训队第二次作业]分配游戏[二分]
根据题意,设$3n$次比较中胜了$w$次,负了$l$次,平了$d$次,所有场次中胜了$W$次,负了$L$次,平了$D$次.如果一场赢了,那么$w-l$就会$+1$,相同地,$W-L$也会$+1$:如果 ...
- springCloud学习-服务消费者(rest+ribbon)
1.ribbon简介 spring cloud的Netflix中提供了两个组件实现软负载均衡调用:ribbon和feign. Ribbon 是一个基于 HTTP 和 TCP 客户端的负载均衡器 它可以 ...
- hdu_1012_u Calculate e_201310121519
u Calculate eTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...