码迷,mamicode.com
首页 > Web开发 > 详细

js实现div居中

时间:2016-11-18 12:05:03      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:load   charset   自身   身高   code   onclick   idt   title   nload   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现-DIV自动居中代码</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
*{margin:0;padding:0}
#box{width:100px;height:100px;position:absolute;top:30px;left:20px; background:#ccc}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.onload = function(){
    function box(){
    //获取DIV为‘box‘的盒子
    var oBox = document.getElementById(box);
    //获取元素自身的宽度
    var L1 = oBox.offsetWidth;
    //获取元素自身的高度
    var H1 = oBox.offsetHeight;
    //获取实际页面的left值。(页面宽度减去元素自身宽度/2)
    var Left = (document.documentElement.clientWidth-L1)/2;
    //获取实际页面的top值。(页面宽度减去元素自身高度/2)
    var top = (document.documentElement.clientHeight-H1)/2;
    oBox.style.left = Left+px;
    oBox.style.top = top+px;
    }
    box();
    //当浏览器页面发生改变时,DIV随着页面的改变居中。
    window.onresize = function(){
        box();
    } 
}
</script>
</body>
</html>

 

 

js实现div居中

标签:load   charset   自身   身高   code   onclick   idt   title   nload   

原文地址:http://www.cnblogs.com/Xuman0927/p/6076942.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!