通过JavaScript使Div居中并随网页大小改变而改变


Posted in Javascript onJune 24, 2013

在使用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这个框架,那么代码就更简单了。
转载请指明出处。

Javascript 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 #Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
js获取某月的最后一天日期的简单实例
Jun 22 #Javascript
js遍历、动态的添加数据的小例子
Jun 22 #Javascript
You might like
PHP 验证码的实现代码
2011/07/17 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python中if __name__ == "__main__"详细解释
2014/10/21 Python
python中使用序列的方法
2015/08/03 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
详解Python多线程下的list
2020/07/03 Python
阿里旅行:飞猪
2017/01/05 全球购物
大一期末自我鉴定
2013/12/13 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
毕业证代领委托书
2014/09/26 职场文书
武夷山导游词
2015/02/03 职场文书
太行山上观后感
2015/06/05 职场文书
公司欠款证明
2015/06/24 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
英镑符号 £
2022/02/17 杂记
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers