华山资源网

通过JavaScript使Div居中并随网页大小改变而改变
网络编程 2024/11/18 佚名
3 1
在使用Java做后台的时候，都会做到登录的页面，但是自己的页面太难看了，要居中没居中，要颜色没颜色，但是无论是怎么样都得使登录的框居中吧！以前的想法是通过CSS+Div使div居中，但是现在的想法变了，通过JavaScript可以简单的使Div在页面上居中，随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。
先看一下居中的原理吧!
先看一张图。
通过JavaScript使Div居中并随网页大小改变而改变 
从图中看到了什么？可以看到红色的框居中了，为什么会居中呢？通过观察可以发现红框的上下的蓝色的间距线是一样长的，这样可以确保了垂直居中，红框的左右的绿色间距线也是一样长的，这样可以确保了水平居中。
但是怎么使上下的间距相等呢？左右的间距相等呢？
在看一张图：
通过JavaScript使Div居中并随网页大小改变而改变 
假设当前网页的高为350px，宽为400px，而红框的高为150px，宽为200px，我们可以发现网页的高减去红框元素的高得到200px像素，而这200px像素正是上下边距的总和，上下边距各得到了100px，同理，左右也是一样的。
有没有感觉到什么？
如果我们知道了网页元素的高或宽，减去元素的高或宽，然后在除以2，就得到了上下左右边距的距离。我们通常给元素的定位是怎么定的呢？不都是通过top和left的坐标定的吗？那么现在红框的坐标是什么呢？
再看一张图：
通过JavaScript使Div居中并随网页大小改变而改变 
红色框的坐标是蓝色的上线100px，和绿色的左线100px，即left和top的值，这两个值不是算出来的吗？
可以总结一个公式：
居中的元素的top =（网页高 –元素的高）/ 2;
居中的元素的left= (网页宽 –元素的宽) /2;
转化为JavaScript的语法为：
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
获取到top和left的坐标不就居中了。
以下是居中的完整代码：
这里要注意几个问题，要设置元素的position的属性为absolute，即绝对定位，然后添加两个事件onload和onresize，要加上px的字符串，offsetHeight是获取元素自身的高，offsetWidth是获取元素自身的宽，这就是当网页加载时和改变大小时div都会居中。不过这种做法是居中的元素和网页的居中，如果想要一个元素在另一个元素的内部居中的话，原理是一样的。我们只需要将网页的宽和高的代码改为另一个元素的宽和高的代码就行了。另一个元素的宽和高可以通过获取到当前元素的parent元素的高和宽。这样也是可以居中的。如果用jquery这个框架，那么代码就更简单了。
转载请指明出处。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com