笔记《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 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...
随机推荐
- windows 小知识---windows下生成公钥和私钥
首先Windows操作系统需要安装git. 安装完成后,再到任意的文件夹内,点击右键.选择git bash here 打开之后,输入ssh-keygen,一路按enter键. 全部结束后,再到C:\U ...
- CentOS / RHEL 7 : Chrony V/s NTP (Differences Between ntpd and chronyd)
CentOS / RHEL 7 : Chrony V/s NTP (Differences Between ntpd and chronyd) Chosing between Chrony and N ...
- git 的简单使用(5)
git中打标签非常简单:只需要先奇幻岛想要打标签的分支 然后使用指令 git tag <name>就可以打一个新标签 可以用指令 git tag 查看所有标签 git tag <标签 ...
- 内存管理（malloc和free的用法）
内存管理 1.堆和栈的区别: 1>栈的特征 1).执行的速度相对较快: 2).空间较小: 3).生存期由系统决定: 4).作用域较小: 5).有名空间,可以通过变量名或者数据名访问: 2> ...
- 学习记录--让我打开另一种思路的SQL
1.显示文章.提交人和最后回复时间 select a.title,a.username,b.adddate from table a, (select max(adddate) adddate fro ...
- 【Codeforces 1106B】Lunar New Year and Food Ordering
[链接] 我是链接,点我呀:) [题意] 给你n个菜以及每个人需要的菜以及数量 如果某个人无法满足它对菜的需求的话 就用价格比较低的菜来填充它的要求. (如果价格低的菜不够了,那么就直接输出0) 否则 ...
- LINUX 查看硬件配置命令
系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ...
- Servlet中使用getInputStream进行文件上传
据说古老了点,所以代码比较繁琐,主要用于处理文件的地方太多. 下节用SERVLET3.0的Part进行操作一下. form.html: <!DOCTYPE html> <html&g ...
- 洛谷 P2023 [AHOI2009]维护序列
P2023 [AHOI2009]维护序列 题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中 ...
- Spring Data Jpa-动态查询条件
/** * * 查看日志列表-按照时间倒序排列 * * @author: wyc * @createTime: 2017年4月20日 下午4:24:43 * @history: * @return L ...