JavaScript系列讲座(五)-高级DOM技术.pptVIP

JavaScript系列讲座(六)　 高级DOM技术 高级DOM技术 样式编程 利用CSS创建可折叠区域 访问样式表 最终样式 自定义鼠标提示 innerText与innerHTML outerText与outerHTML IE中的范围编程 样式编程 CSS于1996年被提出后,它颠覆了开发人员格式化HTML页面的方式,很自然，支持CSS的下一步就是让javascript能够访问样式表 IE4.0为每一个页面上的元素都引入了一个style对象来管理元素的CSS样式．Style对象包含与每个CSS样式对应的属性. 注意：style对象中，两个单词的样式的表示方式是通过将第一个单词加上首字母大写的第二个单词，且单词间没有横线 如： CSS样式特性 Javascript样式属性 color style.color font style.font background-color style.backgroundColor font-family style.fontFamily input type = button value=click me onmouseover=this.style.backgroundColor=black;this.style.color=white onmouseout=this.style.backgroundColor=white;this.style.color=black style=background-Color:white;color:black/ 注意：可以用style.cssText来得到一个对象上所应用的css字符串 案例1:自定义鼠标提示 a href=javascript:void(0) onmouseover=showTip(event) onmouseout = hiddenTip(event)click me/a div id=divTip1 style=background-color:Yellow;position:absolute;visibility:hidden;padding:5px; span这是我自己写的提示br / 这是我自己写的提示/span /div script type=text/javascript function showTip(oEvent) { //alert(document.documentElement.scrollTop); var oDiv = document.getElementById(divTip1); oDiv.style.visibility =visible; oDiv.style.left = document.documentElement.scrollLeft+ oEvent.clientX+5; oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5; } function hiddenTip(oEvent) { var oDiv = document.getElementById(divTip1); oDiv.style.visibility = hidden; } /script 案例2:折叠 div id=divTitle style=width:200px;height:20px;background-color:blue;cursor:pointer onclick=toggle(divContent) /div div id=divContent style=width:200px;height:50px;background-color:red;display:blockContent/div function toggle(div) { var mydiv = document.getElementById(div); if (mydiv) { mydiv.style.display=mydiv.style.display == none?block:none; } } 访问样式表 问题: 使用style对象可以很方便的获取内部样式表,但无法访问外部样式表,如: style type=text/css div.divclass{ background-color:re