DOM(三)CSS DOM 编程

1. IE4.0为每一个Web页面元素引入了一个style对象来管理元素的css样式，最后被DOM沿用至今
2. 改变border line的代码

var oDiv = document.getElementById("div1");

oDiv.style.border = "1px solid black";

3. 通过下面的代码，可以实现hover的效果

4. style对象有一些方法,这些是DOM标准里面有的，但是IE不支持，所以最好还是直接使用style的属性,如：style.backgroundColor的形式来设置style的property值比较好。
    style.getPropertyValue(propertyName);
    style.getPropertyPriority();
    style.item(index);
    style.removeProperty(propertyName);
    style.setProperty(propertyName, value, privority);
5. Copy下面的内容到txt文件，然后改后缀为.htm，用IE打开，可以看到一个黄色的Tip，主要原理是操作style.Visibility属性，这个属性和style.display是不一样的，前者只是控制visible，不会影响布局，后者不仅仅控制visible，还会影响布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Style Example</title>

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";

}

</script>

</head>

<body>

<p>

Move your mouse over the red square.

</p>

<div

id="div1"

style="background-color: red; height: 50px; width:50px"

onmouseover="showTip(window.event)" onmouseout="hideTip(window.event)">

</div>

<div

id="divTip1"

style="background-color: Yellow; position:absolute;visibility:hidden;padding:5px">

Custom Tooltip

</span>

<br/>

More details can go here.

</div>

</body>

</html>

6. 下面代码利用style的display属性控制折叠功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Toggle Example</title>

function toggle(sDivId)

{

var oDiv = document.getElementById(sDivId);

oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";

}

</script>

</head>

<body>

<div

style=" background-color:Blue; color:white;font-weight:bold;padding:10px;cursor:pointer"

onclick="toggle('divContent1')">

Click here.

</div>

<div

id="divContent1"

style="border:3px solid blue; height:100px; padding:10px">

This is some content to show and hide.

</div>

<div

style="background-color:Blue; color:White; font-weight:bold; padding:10px; cursor:pointer"

onclick="toggle('divContent2')">

Click here

</div>

<div

id="divContent2"

style="border: 3px solid blue; height:10px; padding:10px">

This is some content to show and hide.

</div>

</body>

</html>

6. 有些元素通过设置class属性来设置样式，我们可以通过document.styleSheets集合拿到当前文档所有的css class。如果修改css class的设置，将影响所有的使用这个css class的元素。
DOM中可以使用document.styleSheets[0].cssRulers ,但是IE中对应的属性叫document.styleSheets[0].rulers
7. 我们可以为一个element设置style，也可以给它的父Element设置style，还可以设置css class，最后我们在浏览器看到的效果是所有这些设置的合并，IE提供或者最后看到的style的属性是element.currentStyle，它是只读的。DOM提供的是一个方法,可以通过document.defaultView.getComputedStyle(element, hover)获得，第一个参数是元素，第二个参数是伪类：:hover,:first-letter.

posted on 2008-01-22 17:52 Liu Jian 阅读(421) 评论(0) 收藏举报