DOM高级

最新推荐文章于 2022-09-08 12:08:41 发布

追车

最新推荐文章于 2022-09-08 12:08:41 发布

阅读量149

点赞数

分类专栏： javascript 文章标签： DOM高级自定义鼠标提示 style样式 createRange

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

// 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" οnmοuseοver="this.style.backgroundColor='blue'" οnmοuseοut="this.style.backgroundColor='yellow'" οnclick="alert(this.style.cssText)"></div>

<input type="button" value="Test" οnclick="sayStyle()"/>


<div id="div2" style="" title="red" οnmοuseοver="showTip(event)" οnmοuseοut="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" οnclick="useMethod2()"/>
</body>
</html>