// JavaScript Document
function sayStyle(){
var oDiv=document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
/*
第十章 高级DOM技术
一、DOM样式
getPropertyValue(propertyName)返回CSS属性propertyName的字符串的值
getPropertyPriority()如果在规则中指定CSS特性为”important“，则返回important，否则返回空字符串
item(index)返回在给定的index处的CSS属性的名称
removeProperty(propertyName)从CSS中删除propertyName
setProperty(propertyName,value,priority)按照指定的优先级priority来设置CSS特性propertyName的value值
*/
function useMethod(){//当style直接写在标签中使用这种方法有效
var oDiv=document.getElementById("div2");
alert(oDiv.style.item(0));
alert(oDiv.style.getPropertyValue("background-color"));
alert(oDiv.style.removeProperty("background-color"));
}
/*
自定义鼠标提示
*/
function showTip(oEvent){
var oDiv=document.getElementById("divTip1");
oDiv.style.visibility="visible";
oDiv.style.left=oEvent.clientX+5;
oDiv.style.top=oEvent.clientY+5;
}
function hideTip(oEvent){
var oDiv=document.getElementById("divTip1");
oDiv.style.visibility="hidden";
}
/*
若style是在外部CSS文件中定义的或者写在css类中，通过如下方式访问css的属性
*/
function useMethod2(){//当style不写在标签中使用这种方法有效
//document.styleSheets集合包含了html页面中所有样式表的引用
//DOM为每一个样式表指定了cssRules集合，而IE指定的是rules集合
//var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
//alert(cssRules[0].style.backgroundColor);
/*
最终样式
IE:currentStyle对象 alert(oDiv.currentStyle.backgroundColor);
DOM：getComputedStyle()方法 document.defaultView.getComputedStyle(oDiv,null).backgroundColor
*/
var oDiv=document.getElementById("div2");
//alert(oDiv.currentStyle.backgroundColor);
alert(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);
}
/*
innerText:用来修改起始标签和结束标签之间的文本（HTML标签会被转换） oDiv.innerText="1111111111";
innerHTML:同上（不会转换HTML标签）
outText:相当于替换
outHTML:同上
*/
/*
范围
DOM:用createRange()来创建范围
eg： var oRange=document.createRange();
oRange.selectNode()选择整个节点，包含子节点
oRange.selectNodeContents()选择所有子节点
IE:要调用范围，就要调用body、button、input、textarea元素上的createTextRange()
eg: var oRange=document.body.createTextRange()
*/
<!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>
<script type="text/javascript" language="javascript" src="test.js"></script>
<style type="text/css">
#div2{
background-color:#FF0000;
height:50px;
width:50px
}
</style>
</head>
<body>
<div id="div1" style="background-color:#FF0000; height:50px; width:50px" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='yellow'" onclick="alert(this.style.cssText)"></div>
<input type="button" value="Test" onclick="sayStyle()"/>
<!--
1.title的提示功能
2.自定义鼠标提示
-->
<div id="div2" style="" title="red" onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
<div id="divTip1" style="background-color:yellow; position:absolute; visibility:hidden; padding:5px">
<span style="font-weight:bold">Tooltip</span>
</div>
<input type="button" value="Test2" onclick="useMethod2()"/>
</body>
</html>
分享到：
相关推荐
《JavaScript DOM高级程序设计》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。这本书的源码提供了一种实践的方式，帮助读者更好地理解书中的理论知识，并且能够亲手实现书中提到的各种...
本篇将主要围绕JavaScript DOM高级程序设计的第一部分进行深入探讨。 在JavaScript中，DOM是一个标准，它定义了如何表示XML或HTML文档的结构，并提供了通过编程接口来访问和修改文档的方法。DOM模型将网页内容抽象...
《JavaScript DOM 高级程序设计》是一本深入探讨JavaScript与DOM（Document Object Model）交互的专著，旨在帮助读者掌握高级的DOM操作技巧，提升Web前端开发能力。这本书的配套源代码提供了书中所有示例的实际实现...
《JavaScript.DOM高级程序设计》是一本深入探讨JavaScript与DOM（Document Object Model）交互技术的专业书籍。DOM是Web页面内容的结构化表示，JavaScript通过DOM API可以直接操作页面元素，实现动态效果和交互功能...
JavaScript DOM高级程序设计
本书注重理论与实践的结合，全面讲述高级的DOM脚本编程。全书分为3个部分：第一部分“深入理解DOM脚本编程”，涉及W3CDOM规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax...
[大家网]JavaScript.DOM高级程序设计.part1
JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.zip.002 请下载3部份，再用360解压打开。 这是高级JAVASCRIPT编程，适合有javascript开发基础的同学看，没基础的，请忽略
总的来说，掌握JavaScript DOM高级程序设计意味着你能够构建动态、交互性强的网页应用，理解和熟练运用这些知识对于任何前端开发者来说都是必备的。通过不断实践和学习，你可以进一步提升在DOM操作方面的技能，为...
本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以...
### JavaScript DOM 高级程序设计（下） #### 知识点概述 在“JavaScript DOM 高级程序设计”（下）这一章节中，我们将继续深入探讨DOM（文档对象模型）的相关高级技术，包括但不限于事件处理、节点操作以及跨...
第三部分 部分高级脚本编程资源 第9章 通过库来提高生产力 9.1 选择合适的库 9.2 增强DOM操作能力 9.2.1 连缀语法 9.2.2 通过回调函数进行过滤 9.2.3 操纵DOM文档 9.3 处理事件 ...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
在吃透了前面所说的书之后，接下来两本书的顺序已经无关紧要了，《JavaScript DOM高级程序设计》（注意和《JavaScript 高级程序设计》相区别）和《JavaScript设计模式》，这两本都是重量级的书，能让你的JS技术上一...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
javascript DOM高级程序设计 源码