javascript01-div居中的兼容问题，发一个奇怪的代码，可能是我没有理解精髓吧。

peizhiinfo

浏览: 1424784 次

最近访客更多访客>>

u012363178

wangyy

shb121

ybj316

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1871)

社区版块

存档分类

2011-11 ( 126)
2011-10 ( 252)
2011-09 ( 292)
更多存档...

天做项目需要用的一个div居中，下面一个模态层的问题，我写了个代码，大概分离出来如下。

view sourceprint?

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 

    <title></title> 

    <style type="text/css"> 

        div 

        { 

            width: 200px; 

            height: 300px; 

            background: red; 

            border: 1px solid black; 

        } 

    </style> 

</head> 

<body> 

    <div> 

    </div> 

    <div> 

    </div> 

    <div id="d" style="position: absolute; width: 200px; height: 300px;"> 

    </div> 

    <script type="text/javascript"> 

        var pageWidth = 0; 

        var pageHeight = 0; 

        var left = "0px"; 

        var top = "0px"; 

        var divWidth = 0; 

        var divHeight = 0; 

        var d = document.getElementById("d"); 

        if (d) { 

            //        divWidth = (d.style.width.toString()).replace("px", ""); 

            //        divHeight = (d.style.height.toString()).replace("px", ""); 

            divWidth = parseInt(d.style.width.toString()); 

            divHeight = parseInt(d.style.height.toString()); 

        } 

        if (document.compatMode == "CSS1Compat") { 

            pageWidth = parseInt(document.documentElement.clientWidth); 

            pageHeight = parseInt(document.documentElement.clientHeight); 

        } else { 

            pageWidth = parseInt(document.body.clientWidth); 

            pageHeight = parseInt(document.body.clientHeight); 

        } 

        left = ((pageWidth - divWidth) / 2).toString() + "px"; 

        top = ((pageHeight - divHeight) / 2).toString()+"px"; 

        d.style.left = left 

        d.style.top = ((pageHeight - divHeight) / 2).toString() + "px";//goog浏览器不得行???? 

        d.innerHTML = "pageWidth:" + pageWidth + "<br/> pageHeight:" + pageHeight + "<br/> divWidth:" + divWidth 

     + " <br/>divHeight:" + divHeight + " <br/>left:" + left + " <br/>top:" + top; 

    </script> 

</body> 

</html>