利用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 AutoScroller 函数类
May 29 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
js获取form的方法
May 06 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
Javascript自定义事件详解
Jan 13 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
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
Javascript 学习笔记 错误处理
2009/07/30 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
js获取form的方法
2015/05/06 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python3.2中的字符串函数学习总结
2015/04/23 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
德语专业求职信
2014/03/12 职场文书
可口可乐广告词
2014/03/20 职场文书
教师四风问题整改措施
2014/09/25 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
个人求职自荐信范文
2015/03/06 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
离职证明范本
2015/06/12 职场文书
nginx 配置缓存
2022/05/11 Servers
MySQL数据库简介与基本操作
2022/05/30 MySQL