通过JavaScript使Div居中并随网页大小改变而改变
JavaScript网页 通过 改变 大小 div 居中
2023-06-13 09:15:02 时间
在使用Java做后台的时候,都会做到登录的页面,但是自己的页面太难看了,要居中没居中,要颜色没颜色,但是无论是怎么样都得使登录的框居中吧!以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。
先看一下居中的原理吧!
先看一张图。
从图中看到了什么?可以看到红色的框居中了,为什么会居中呢?通过观察可以发现红框的上下的蓝色的间距线是一样长的,这样可以确保了垂直居中,红框的左右的绿色间距线也是一样长的,这样可以确保了水平居中。
但是怎么使上下的间距相等呢?左右的间距相等呢?
在看一张图:
假设当前网页的高为350px,宽为400px,而红框的高为150px,宽为200px,我们可以发现网页的高减去红框元素的高得到200px像素,而这200px像素正是上下边距的总和,上下边距各得到了100px,同理,左右也是一样的。
有没有感觉到什么?
如果我们知道了网页元素的高或宽,减去元素的高或宽,然后在除以2,就得到了上下左右边距的距离。我们通常给元素的定位是怎么定的呢?不都是通过top和left的坐标定的吗?那么现在红框的坐标是什么呢?
再看一张图:
红色框的坐标是蓝色的上线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这个框架,那么代码就更简单了。
转载请指明出处。
先看一下居中的原理吧!
先看一张图。
从图中看到了什么?可以看到红色的框居中了,为什么会居中呢?通过观察可以发现红框的上下的蓝色的间距线是一样长的,这样可以确保了垂直居中,红框的左右的绿色间距线也是一样长的,这样可以确保了水平居中。
但是怎么使上下的间距相等呢?左右的间距相等呢?
在看一张图:
假设当前网页的高为350px,宽为400px,而红框的高为150px,宽为200px,我们可以发现网页的高减去红框元素的高得到200px像素,而这200px像素正是上下边距的总和,上下边距各得到了100px,同理,左右也是一样的。
有没有感觉到什么?
如果我们知道了网页元素的高或宽,减去元素的高或宽,然后在除以2,就得到了上下左右边距的距离。我们通常给元素的定位是怎么定的呢?不都是通过top和left的坐标定的吗?那么现在红框的坐标是什么呢?
再看一张图:
红色框的坐标是蓝色的上线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 基础_JavaScript高级编程
- JavaScript 基础 - 第1天
- Art Blocks合约要点分析 - 利用 JavaScript 动态生成图片
- 客服系统前端开发:JavaScript获取URL中的协议部分和域名部分【唯一客服】网页在线客服系统
- 客服系统前端开发:JavaScript删除对象数组中指定key value的对象【唯一客服】网页在线客服系统
- 万能的 JavaScript,向网页中插入五线谱(abc.js)
- 轻松学习 JavaScript——第 1 部分:了解 let 语句详解编程语言
- JavaScript实现自适应窗口大小的网页详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- 网页调试:myeclipse修改javascript代码后,执行没有变化呀详解编程语言
- 通过JavaScript脚本复制网页上的一个表格
- 贴一个在Mozilla中常用的Javascript代码
- JavaScript与函数式编程解释
- 用javascript实现的不错的一款网页选项卡
- javascript禁止复制网页
- javascript一些实用技巧小结
- JavaScript中去掉数组中的重复值的实现方法
- JavaScript在网页上单击鼠标的地方显示层及关闭层
- JavaScript实现网页图片等比例缩放实现代码及调用方式
- JavaScript验证码的实例代码(附效果图)
- javascript重写alert方法的实例代码
- Javascript获取HTML静态页面参数传递值示例
- 使用javascript为网页增加夜间模式
- javascript动态向网页中添加表格实现代码
- javascript避免数字计算精度误差的方法详解
- javascript操作referer详细解析
- JavaScript打印网页指定区域的例子
- JavaScript实现网页截图功能
- Javascript限制网页只能在微信内置浏览器中访问
- JavaScript获取网页、浏览器、屏幕高度和宽度汇总
- JavaScript中的console.assert()函数介绍
- JavaScript实现找出字符串中第一个不重复的字符