兼容的話題：currentStyle


馬克- to-win：馬克 java社區(qū)：防盜版實(shí)名手機(jī)尾號(hào)： 73203。
例 2.3.1
<!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>
    <style type="text/css">
        #mydiv {
            background-color: #28F;
            width: 400px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            ob = document.getElementById('mydiv');
            alert("document.all is"+ document.all);
            if (document.all) {
                alert("current is ie");
                alert(ob.currentStyle.backgroundColor);
                alert(ob.currentStyle.height);
                ob.style.background="#FF3C31";
            } else {
                alert("current is Firefox");
                alert(window.getComputedStyle(ob).getPropertyValue('background-color'));
                alert(window.getComputedStyle(ob).getPropertyValue('height'));
                ob.style.background="#FF3C31";
            }
        }
    </script>
</head>
<body>
<div id="mydiv">馬克-to-win</div>
</body>
</html>




例 2.3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
    #square {
        /* 馬克-to-win：for 美工 student, this example needs to be demoed to show how to
        use dreamer. when do this experiment, we can directly use dreamweaver。note that we must first insert a layout
         object/ div label.ID寫drag,緊接著點(diǎn)擊底下的“新建css樣式”，高級(jí)ID，#drag，僅對(duì)該文檔。
          then must have 定位，類型，絕對(duì)， position:absolute;
         上面這一步同樣可以在html網(wǎng)頁中， 任何時(shí)候點(diǎn)擊右鍵：css樣式/新建， 達(dá)到同樣效果。
         after finish the wizard, we can also change the css property by right-clicking the #drag in the right window.
         then editing it.
        */
        position: absolute;
        border: solid 1px green;
        background-color: #FFCCCC;
        width: 200px;
        left: 20px;
        top: 20px;
        height: 200px;
    }
</style>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function move(t)
    {
        if (document.all) {

        var s="backgroundcolor is "+t.currentStyle.backgroundColor;
        var s1="height is "+t.currentStyle.height;
        var s2="position is "+t.currentStyle.position;

   var s3="border is "+t.currentStyle.borderTopColor;

            } else {
        var s="backgroundcolor is "+window.getComputedStyle(t, null).getPropertyValue('background-color');
        alert("s is "+s);
        var s1="height is "+window.getComputedStyle(t, null).getPropertyValue('height');
        alert("s1 is "+s1);
        var s2="position is "+window.getComputedStyle(t, null).getPropertyValue('position');
        alert("s2 is "+s2);

        var s3="border is "+window.getComputedStyle(t, null).getPropertyValue('border-top-color');
        alert("s3 is "+s3);
        var s31="border is "+window.getComputedStyle(t, null).getPropertyValue('border-left-color');
        alert("s31 is "+s31);
        var s33="border is "+window.getComputedStyle(t, null).getPropertyValue('border-left-style');
        alert("s33 is "+s33);
        var s4="width is "+window.getComputedStyle(t, null).getPropertyValue('width');
        alert("s4 is "+s4);
        var s5="left is "+window.getComputedStyle(t, null).getPropertyValue('left');
        alert("s5 is "+s5);
        var s6="top is "+window.getComputedStyle(t, null).getPropertyValue('top');
        alert("s6 is "+s6);
            }


/*下句也能工作*/
        t.style.backgroundColor = "#FF8888";
        t.style.backgroundColor="yellow";
        t.style.background="#2A31EE";//前兩個(gè)都被覆蓋了
        t.style.borderColor = "red";
        t.style.borderWidth = "4px";
        t.style.height = "150px";
        t.style.left = "40px";
        var s7="單步調(diào)試站位";
    }
    //-->
</SCRIPT>
</HEAD>
<BODY>
<div id="square" ondblclick="move(this)">馬克-to-win</div>
</BODY>
</HTML>