`

脚本化文档DOM之一

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body style="padding:50px;margin:0px; height:2000px;border:10px solid red;">
<div id="divs" style="width:240px; height:300px; padding:80px;  border:20px solid red;">
	<div id="div" style="width:200px; height:300px; margin:20px;  border:20px solid red;"></div>
</div>
<script>
var w = document.getElementById("div");
document.writeln("body.offsetWidth:"+document.body.offsetWidth+"=>对象的内Width + 边框<br/>");
document.writeln("body.clientWIdth:"+document.body.clientWidth+"=>对象的内Width<br/>");
document.writeln("div.offsetWidth:"+w.offsetWidth+"=>对象的内Width + 边框<br/>");
document.writeln("div.clientWIdth:"+w.clientWidth+"=>对象的内Width<br/>");
document.writeln("div.offsetLeft:"+w.offsetLeft+" 在IE下包括body的边框,在FF下不包括它的边框<br/>");
document.writeln("div.clientLeft:"+w.clientLeft+"内容与Div边的距离<br/>");
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
document.writeln("document.documentElement.clientHeight获取浏览器的Width:"+winWidth+"<br/>");
document.writeln("document.documentElement.clientWidth获取浏览器的Height:"+winHeight+"<br/>");
document.write("获取滚动条的Top:"+document.documentElement.scrollTop+"<br/>");
document.write("获取滚动条的Left:"+document.documentElement.scrollLeft+"<br/>");
document.write("获取滚动条的Width:"+document.documentElement.scrollWidth+"<br/>");
document.write("获取滚动条的height:"+document.documentElement.scrollHeight+"<br/>");
document.write("获取Body的height:"+document.body.offsetHeight+"<br/>");
</script>
</body>
</html>

 

分享到:
评论

相关推荐

    javascript脚本化文档

    IE4拥有一个革命性的DOM:它允许访问一个文档中的所有元素,并且允许以很多有趣的方式来脚本化很多元素。需要的话,它甚至允许改变一个文档的文本,重新排列文档的段落。Microsoft的API叫做IE4 DOM。它并没有标准化...

    基于Jscript脚本技术的SVG文档的DOM解析

    摘要: 主要介绍了S V G文档的D O M编程接口, 并结合所设计的网络化测试系统中测试结果曲线的We b发布这一功能. 提 出了利用J s c r i p t 脚本技术和中间层“ 数据池” 对 S V G文档进行 D OM解析的技术方案。 ...

    脚本控制台 甲子版 通过控制台查看目的网页的DOM文档树,执行JavaScript脚本

    2,通过控制台查看目的网页的DOM文档树,执行JavaScript脚本, 界面介绍: 1, 命令历史窗口:保存命令的历史 2, 命令窗口 直接输入javascript语句,如:document.title; 将返回被调试页面的页面标题; ...

    Web应用安全:DOM型XSS.pptx

    DOM型XSS 4 DOM型XSS防御 3 DOM型XSS原理分析 2 DOM型XSS简介 1 DOM 5 反射型与存储型与DOM型的对比 ...dom就是一个树状的模型,你可以编写Javascript代码根据dom一层一层的节点,去遍历/获取/修改对应的节点,对象,

    DOM编程详解(含HTML部分)

    DOM编程详解(含HTML部分)DOM是Document Object ...简单理解,DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

    dom-scripter:在 html 文档中注入删除脚本、样式表和 jsonld 文档

    DOM 脚本注入器 在 html 文档中注入/删除脚本、样式表。 安装 npm install dom-scripter 进口 根据您的用例,有不同类型的分发。 本质上,该包可以通过 require 导入: const DOMScripterLib = require ( 'dom-...

    论文研究-基于XPath路径的Web应用测试脚本修复.pdf

    根据报告中每条失效脚本的XPath和value信息,通过遍历新旧应用网页差异文档对象化模型解析树(DOM tree),找到替换失效脚本的路径或value值,从而修复失效的测试脚本。实验结果表明,该方法对修复失效测试脚本是...

    文档对象模型DOM通俗讲解

    在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍。加深对DOM的理解,从而对它有一个...它给文档提供了一种结构化的表示方法,可以改变文档的内容和

    最强悍的脚本帮助手册

    javascript.chm Prototype_1.5.1_rc1_中文开发...DOM帮助文档.chm dom_chs_CodePub.chm XMLDOM对象方法手册.chm JavaScript宝典.chm xml_基础学习完全手册.chm HTML基础.chm Cascading Style Sheet 样式表中文手册.chm

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测   1.2.3 通过平稳退化保证可访问...

    javascript DOM 编程艺术

    从颇具深度的JavaScript语言基础到作用域(链),从引用类型到面向对象编程,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(BOM)、文档对象模型(DOM)到基于事件的Web脚本设计,从XML(E4X)到Ajax及JSON,从...

    Javascript-DOM:文档对象模型(DOM)是HTML和XML文档的编程接口。 它代表页面,以便程序可以更改文档的结构,样式和内容。 ... DOM是网页的面向对象的表示形式,可以使用诸如JavaScript之类的脚本语言进行修改。

    Javascript-DOM 文档对象模型(DOM)是HTML和XML文档的编程接口。 它代表页面,以便程序可以更改文档的结构,样式和内容。... DOM是网页的面向对象的表示形式,可以使用诸如JavaScript之类的脚本语言进行修改。

    什么是DOM(Document Object Model)文档对象模型

    document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关、语言无关的API,程序或脚本通过其动态访问、修改文档的...

    dominject:通过重复的预防和完成回调支持将脚本和样式注入DOM

    通过重复的预防和完成回调支持将脚本和样式注入DOM 用法 完整的API文档。 var dominject = require ( 'dominject' ) var element = dominject ( { type : 'script' , url : '//some-url.js' , attrs : { } , //...

    dom.pdf

    文档对象模型(DOM)属于VBScript客户端扩展部分,在文档对象模型中提供了大量的对象,这些对象应用于浏览器上,这些对象在我们编写脚本时发挥着重要的作用

    DOM,DNTML,CSS2参考手册

    DOM,DNTML,CSS2参考手册 手册提供了完整的 CSS...简单理解,DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

    Firefox用户脚本管理器(Greasemonkey) v1.10火狐插件.rar

    大部分Greasemonkey用户脚本都是自行撰写,使用对某网站专用的JavaScript代码,通过文档对象模型(DOM)接口对网页内容做操作。userscripts.org维护了个Greasemonkey数据库。该数据库描述哪个网址网页对应到哪个脚本...

    VBSCRIPT文档对象模型

    文档对象模型(DOM)属于VBScript客户端扩展部分,在文档对象模型中提供了大量的对象,这些对象应用于浏览器上,这些对象在我们编写脚本时发挥着重要的作用。

    [JavaScript.Enlightenment(2012.12)].Cody.Lindley.文字版.pdf

    通过《DOM启蒙》,读者将学习如何通过文档对象模型(DOM)更有效率地操作HTML,而无需DOM操作库的帮助。...读者将理解jQuery在DOM脚本编写中扮演的角色,并学习如何在移动应用和特定浏览器中直接使用DOM编写应用程序。

Global site tag (gtag.js) - Google Analytics