使用js解决由border属性引起的div宽度问题
<script type="text/javascript">
var timer
function stopMove(){
clearInterval(timer)
}
function startMove(){
var div=document.getElementById('ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;//理论上应该是宽度不断减少,但是实际却增长,原因在样式表中的border属性,去掉即可解决
},20)
}
</script>
<style type="text/css">
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid; }
</style>
</head>
<body>
<div id="ok"></div>
注意看注释,为什么会出现这个现象呢?其实就是由于border引起的,由于ok.style.width指定的是div的宽度,而offsetwidth指的是实际的宽度,包括border宽度。所以这个右边的式子得到的宽度值其实比左边大一个像素,解决办法,每次减去3个像素就可以达到实际减去一个像素的目的。或者用右边也用parseInt(div.style.width),但要修改div如下:
代码如下:
<div id="ok" style="width:200px:></div>
终极方案:用currentstyle或getcomputedstyle来获取属性。
相关推荐
-
js固定DIV高度,超出部分自动添加滚动条的简单方法
复制代码 代码如下: function setheight() { var div=document.getElementById("event_basicInfo"); //div.style.width="40%"; div.style.height=400; div.style.overflow="auto"; } window.onload=setheight;
-
JS控制一个DIV层在指定时间内消失的方法
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>定时关闭的层<
-
js使用removeChild方法动态删除div元素
在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va
-
ajax局部刷新一个div下jsp内容的方法
用AJAX刷新一个DIV中的jsp内容 复制代码 代码如下: <script type="text/javascript"> var xmlhttp; function startrefresh(){ xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST,"ss.jsp",true); xmlhttp.setRequestHeader("Content-type","ap
-
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
-
js实现可拖动DIV的方法
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如
-
js解决弹窗问题实现班级跳转DIV示例
1.js代码如下: 复制代码 代码如下: <%--实现班级跳转DIV--%> <div id="displayClassDiv" style="display:none;" class="gp_box"> <ul> <% for(int i=0;i<dtPTC.Rows.Count;i++) { if (dtPTC.Rows[i]["ISPRO"].ToString() == &
-
jquery和js实现对div的隐藏和显示方法
jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi
-
js innerHTML 改变div内容的方法
改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn
-
js防止DIV布局滚动时闪动的解决方法
本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考.具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染.资料非常多,所以选一些做节译,备忘. JavaScript多次写.读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree 复制代码 代码如下: from a DOM tree1). // 读 var h1 = element1.clientHeight; /
-
js通过八个点 拖动改变div大小的实现方法
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRigh
-
js 为label标签和div标签赋值的方法
在html中,label是没有value属性的, 他与div以及其他大部分html元素一样,有innerText和innerHTML属性 不能document.getElementByID("test").value="chenhuang"; 应该是下面的 复制代码 代码如下: <labelid="test"></label>document.getElementById(test).innerText="&qu
-
js循环改变div颜色具体方法
在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种: 复制代码 代码如下: for (var i; i < array.length; i++) { statement; } for (var i in array) { statement; } 这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的.源码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <st
-
解决用jquery load加载页面到div时,不执行页面js的问题
jquery代码: 复制代码 代码如下: $(function(){$("#test").load("${contextPath}/notepad/toCreate.do");} 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现,换个思路: 复制代码 代码如下: <div id="test"> <i
随机推荐
- jQuery ajax中使用serialize()方法提交表单数据示例
- Perl 函数集小结
- 基于存储过程的详细介绍
- 在Java下利用log4j记录日志的方法
- Java可变参数列表详解
- Java中Properties的使用详解
- thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
- ashx中使用session的方法(获取session值)
- php实现常用文件上传类的示例
- 磁盘阵列初步了解图文教程
- Python中的列表生成式与生成器学习教程
- 对有insert触发器表取IDENTITY值时发现的问题
- jQuery对象[0]是什么含义?
- C#窗体显示留言时间的方法
- PHP实现动态压缩js与css文件的方法
- python执行精确的小数计算方法
- Linux下动态链接库加载路径及搜索路径问题
- 微信小程序实现渐入渐出动画效果
- python画微信表情符的实例代码
- thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结