博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js控制使div自动适应居中
阅读量:4631 次
发布时间:2019-06-09

本文共 1148 字,大约阅读时间需要 3 分钟。

一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示位置。    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义:    document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。    document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。    document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。    document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。    现在我们来分析一下程序该如何实现:第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。1.计算出层距离显示区域左边和上边的位置注意:divId指的是所要居中的层,divId.clientWidth为其宽度!@var divId = document.getElementByIdx("xxx");var v_left=(document.body.clientWidth-divId.clientWidth)/2;var v_top=(document.body.clientHeight-divId.clientHeight)/2;2.把得到的值重新赋给DIV的left和top属性divId.style.left=v_left;divId.style.top=v_top;说明:divId为DIV标签的id值这样这个层就是居中显示的了。第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。v_left+=document.body.scrollLeft;v_top+=document.body.scrollTop;2.把得到的值重新赋给DIV的left和top属性divId.style.left=v_left;divId.style.top=v_top;这样显示出来就是居中的了。fat注:那个document。body其实可以一般化?

 

转载于:https://www.cnblogs.com/visi_zhangyang/p/4062687.html

你可能感兴趣的文章
静态页面:html5个人博客模板《绅士》
查看>>
mvc 基础概念
查看>>
mysql数据恢复
查看>>
kali 插耳机没声音
查看>>
Codeforces Round #294 (Div. 2) D. A and B and Interesting Substrings
查看>>
如何巧妙使用ZBrush中的Image Plane插件
查看>>
windows安装theano和keras
查看>>
141. Linked List Cycle
查看>>
169. Majority Element
查看>>
51NOD 1087 1 10 100 1000
查看>>
谈谈javascript语法里一些难点问题(一)
查看>>
jQuery 遍历同胞(siblings)
查看>>
小萌库一周电影大合集
查看>>
Linux 之根目录介绍
查看>>
iOS学习之代码块(Block)
查看>>
十三种迹象表明百度取消新闻源势在必行的趋势
查看>>
vue初识(一)
查看>>
jQuery版本升级踩坑大全
查看>>
nginx+tomcat实现Windows系统下的负载均衡搭建的案例
查看>>
checkstyle.xml Code Style for Eclipse
查看>>