第12章JavaScript.pptVIP

JavaScript 学习指南 Chapter12：动态页面 内容 JavaScript、CSS和DOM DHTML（动态HTML）：使用JavaScript创建的动态的web页面称之DHTML ，现称为Ajax； DOM (Document Object Model)文档对象模型,如何把HTML或XML文档解析成内存结构树的规范 CSS能帮助用户对页面的布局加以更多的控制，弥补了HTML对网页格式化方面的不足，起到排版定位的作用； 在JavaScript中通过DOM可以访问样式表属性和CSS，是实现网页的动态性、交互性。 12.1 样式属性 如何设置页面元素的属性： 在W3C的DOM规范中所有节点保存了相关的style对象的属性； 通过style对象查询和设置CSS样式属性。 12.1.1 动态修改页面元素的样式属性实例 12.1.2 获得CSS样式信息 通过脚本获取样式属性的值 IE浏览器支持使用currentStyle属性； Firefox浏览器中支持使用window.getComputedStyle方法访问属性。 12.2 字体和文本属性 字体属性：针对字符本身的字符集、大小和类型等 文本属性：是对文本的的修饰例如文本修饰、对齐方式等 12.2.1 字体样式属性 12.2.2 文本属性 实例：修改一个文本块 12.3 元素动态定位和“飞入式”动画(示例12.4) CSS定位：在JavaScript使用CSS-P规范设置元素位置 常用的定位属性： position ：可选的值relative、absolute、static或者fixed top ： 用来设置与容器顶部的相对位置 left： 用来设置与容器左边的相对位置 right ： 如果为0用来表示放在页面最右边；值越大表示位于页面的最左端。 bottom：表示与页面底部的相对位置； Z-index:为0时表示常规的呈现层（相对定位）；为负数时处于该元素低于该层；当为正数时表示该元素高于该层； fly-in是动态web页面效果一种，使元素像从文档的外边 “飞进来”一样。 注意：只有定位方式为static时，top、right、bottom、left 和Z-index属性才有效。 /headbody div id=navpNext slide/p /div div id=div1 pBlue block that is absolutely positioned./p /div div id=div2 pYellow block that is relatively positioned, and given a z-index of 4./p /div div id=div3 pRed block that has fixed positioning./p /div /body /html 12.3.2 拖放操作 Web访问者可以拖放元素操作 例如：google Maps（可以拖动地图） 具体示例(见12.5) 见演示 在容器里拖动一个对象 script type=text/javascript var dragObject = null; var mouseOffset = null; // 捕捉鼠标相关事件 document.onmousemove =mouseMove; document.onmouseup = mouseUp; //创建一个鼠标位置 function MousePoint(x,y) { this.x = x; this.y = y;} //寻找鼠标位置 function mousePosition(evnt){ var x = parseInt(evnt.clientX); var y = parseInt(evnt.clientY); return new MousePoint(x,y);} } //获取元素在页面中的偏移量 function getMouseOffset(target, evnt){ var theEvent = evnt ? evnt : window.event; var mousePos =mousePosition(theEvent); var x = mousePos.x - target.offsetLeft; var y = mousePos.y - target.offsetTop; return new MousePoint(x,y); } 12.4 大小和修剪 控制元素的大