利用onresize使得div可以随着屏幕大小而自适应的代码


Posted in Javascript onJanuary 15, 2010

当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位;另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
的时候,top的百分比将会失效,而删除这句话的时候,一切正常,都是不知道这句标准的声明为什么会带来如此的不便
针对这个问题,我使用的下面的方法来实现div的自适应
首先 我用的是绝对定位的方式,先设置好div的左右上下边距。在body中添加两个事件,
<body bgcolor="#666666" onresize="test()" onload="getwah()">
getwah()用来获取屏幕的大小和div的各个边距,并计算出它们的差

var height,width,width_cha1,width_cha2; 
function getwah() 
{ 
if(document.documentElement && document.documentElement.clientWidth) 
{d_width = document.documentElement.clientWidth;} 
else if(document.body) 
{d_width = document.body.clientWidth;} 
width=parseInt(d_width); 
width_cha1=width-parseInt(document.getElementById("backi").style.left) 
width_cha2=width-parseInt(document.getElementById("massage_box").style.left) 
}

当屏幕大小变化的时候(onresize)触发test()函数,该函数就是用户根据之前获得屏幕与边距的差值重新设置div的边距,这样就可以实现党屏幕的大小改变后,div的边距也会相应地改变,从而实现div可以随着屏幕大小的改变而自适应
function test() 
{ 
if(document.documentElement && document.documentElement.clientWidth) 
{d_width = document.documentElement.clientWidth;} 
else if(document.body) 
{d_width = document.body.clientWidth;} 
var now_left1=parseInt(d_width )-width_cha1; 
var now_left2=parseInt(d_width )-width_cha2; 
document.getElementById("backi").style.left=now_left1 
document.getElementById("massage_box").style.left=now_left2 
}
Javascript 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
javascript 不间断的图片滚动并可点击
Jan 15 #Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 #Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
用jQuery扩展自写的 UI导航
Jan 13 #Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
JavaScript关于select的相关操作说明
Jan 13 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 调用HBase的简单实例
2016/12/18 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python实现感知机模型的示例
2020/09/30 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
家长会邀请书
2014/01/25 职场文书
优秀求职信范文分享
2014/01/26 职场文书
公民代理授权委托书
2014/09/24 职场文书
2015元旦标语横幅
2014/12/09 职场文书
小学主题班会教案
2015/08/17 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python