第六、DOM操作样式表

senny

浏览: 16300 次
性别:
来自: 成都

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript CSS 浏览器 IE XHTML

第六章 DOM操作样式表

一、操作style样式属性：

在DOM中每个CSS样式，Style对象都有一个属性与之对应。

（一）单个词：background 对应 background

（二）两个词：background-color对应backgroundColor

（三）通常我们可以使用for in 来知道style对象的属性

请看下列代码：

<div id="style"></div>
<script type="text/javascript">
for(i in document.getElementById("style").style){
document.write(i+":"+document.getElementById("style").style[i]+"<br>");
}
</script>

二、操纵外部样式表（或内嵌）

（一）document.styleSheets ==> 指向该网页的<link>.<style>两个标签的集合

（二）document.styleSheets[0].cssRules/rules ==>指向该网页第一个样式表引用中的选择器集合。

var rules = document.styleSheets[0].cssRules||document.styleSheets[0].rules

前一个是DOM浏览器所定义的对象，后一个是IE，通常用上述方式来获取不同浏览器的选择器集合

三、实例：

（一）创建一个折叠区域：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示隐藏区域</title>
<style type="text/css">
#out{
background:#F00;
width:200px;
}
#control{
cursor:pointer;
}
#inner{
display:none;
}
</style>
<script type="text/javascript">
window.onload = init;
var control = null;
var inner = null;
function init(){
control = document.getElementById("control");
inner = document.getElementById("inner");
control.onclick = div;
}
function div(){
var innerStyle = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
innerStyle[2].style.display = (innerStyle[2].style.display=="none")?"block":"none";
control.innerHTML = (control.innerHTML == "+ 显示")?"- 隐藏":"+ 显示";
}
</script>
</head>
<body>
<div id="out">
<div id="control">+ 显示</div>
    <div id="inner">
    	<ul>
        	<li>哈哈</li>
            <li>哈哈</li>
            <li>哈哈</li>
        </ul>
    </div>
</div>
</body>
</html>

（二）类似toolTips

<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">
function over(e){
var toolTips = document.getElementById("toolTips");
if(!e) e = window.event;
toolTips.style.visibility = "visible";
toolTips.style.left = e.clientX + 5 + "px";
toolTips.style.top = e.clientY + 5 + "px";
}
function out(){
var toolTips = document.getElementById("toolTips");
toolTips.style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="div" style="width:100px; height:100px; background:red" onmouseover="over(event)" onmouseout="out(event)"> </div>
<div id="toolTips" style="position:absolute; padding:5px; background-color:#CF0; visibility:hidden;"> 这个是提示 </div>
</body>
</html>

0
顶

0
踩

分享到：

第七、JavaScript表单编程 | 第五、文档对象模型DOM

2009-06-29 20:39
浏览 2280
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

第六、DOM操作样式表

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

第六、DOM操作样式表

评论

发表评论

相关推荐

第八、AJAX基础

第七、JavaScript表单编程

第五、文档对象模型DOM

第四、浏览器对象模型BOM

第三、JavaScript事件模型

第二、JavaScript面向对象编程

第一、Javascript核心基础语法

最近访客更多访客>>