js无法获取隐蔽的div的宽窄只好先出示后收获,

时间:2019-07-25 18:15来源:2020欧洲杯冠军竞猜官方网站
我要获取一个根据内容自适应宽度的div的实际宽度,这个div初始是隐藏的,我要获取它的实际宽度,对他进行居中操作,弄了很长时间,总是获取不到该div的真实宽度,后来发现js不能

我要获取一个根据内容自适应宽度的div的实际宽度,这个div初始是隐藏的,我要获取它的实际宽度,对他进行居中操作,弄了很长时间,总是获取不到该div的真实宽度,后来发现js不能获取隐藏div的的宽度,现在的办法是先将其显示出来,再获取其宽度,计算位置

var oDiv = document.getElementById("show");
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
var cHeight= document.documentElement.clientHeight || document.body.clientHeight;
var mid = (cHeight - oDiv.offsetHeight) / 2;
// oDiv.style.top = parseInt(sTop mid) "px"; //理论上应该只设这句就可以居中吧

注意看注释,为什么会出现这个现象呢?其实就是由于border引起的,由于ok.style.width指定的是div的宽度,而offsetwidth指的是实际的宽度,包括border宽度。所以这个右边的式子得到的宽度值其实比左边大一个像素,解决办法,每次减去3个像素就可以达到实际减去一个像素的目的。或者用右边也用parseInt(div.style.width),但要修改div如下:

2020欧洲杯冠军竞猜官方网站,您可能感兴趣的文章:

  • js加载读取内容及显示与隐藏div示例
  • js innerHTML 改变div内容的方法
  • js实现右下角可关闭最小化div(可用于展示推荐内容)
  • js分页显示div的内容
  • js实现div弹出层的方法
  • js防止DIV布局滚动时闪动的解决方法
  • js使用循环清空某个div中的input标签值
  • js实现的点击div区域外隐藏div区域
  • js实现div闪烁原理及实现代码
  • JS实现div居中示例
  • js通过八个点 拖动改变div大小的实现方法
  • DIV始终居中的js代码
  • JS在可编辑的div中的光标位置插入内容的方法

//实际上的 各大浏览器只认识下面这if判断
if(navigator.appVersion.indexOf("MSIE 6")> -1){
oDiv.style.top = parseInt(sTop mid) "px";
}else{
oDiv.style.top =mid "px";
}
}

复制代码 代码如下:

$(".Loading").css({ "display": "block" });// 先显示 
var tipsWidth = $(".Loading").css("width").replace("px", "") //再获取 
var windowWidth = $(window).width(); 
$(".Loading").css({ "left": (windowWidth - tipsWidth) / 2   "px" });

您可能感兴趣的文章:

  • js加载读取内容及显示与隐藏div示例
  • js innerHTML 改变div内容的方法
  • js实现右下角可关闭最小化div(可用于展示推荐内容)
  • js分页显示div的内容
  • js实现div弹出层的方法
  • js防止DIV布局滚动时闪动的解决方法
  • js使用循环清空某个div中的input标签值
  • js不能获取隐藏的div的宽度只能先显示后获取
  • js实现的点击div区域外隐藏div区域
  • js实现div闪烁原理及实现代码
  • JS实现div居中示例
  • js通过八个点 拖动改变div大小的实现方法
  • JS在可编辑的div中的光标位置插入内容的方法

<div id="ok" style="width:200px:></div>

var tipsWidth = $(".Loading").css("width").replace("px", "") //先获取 
var windowWidth = $(window).width(); 
$(".Loading").css({ "display": "block" }); //再显示 
$(".Loading").css({ "left": (windowWidth - tipsWidth) / 2   "px" }); 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧边栏广告</title>
<style type="text/css">
#show { width:100px; height:80px; background:#0f0; position:fixed; _position:absolute; right:0px; top:0px;}
</style>
<script type="text/javascript">
window.onscroll = window.onresize = window.onload = function(){

下面我们来看一个例程

复制代码 代码如下:

您可能感兴趣的文章:

  • jquery和js实现对div的隐藏和显示方法
  • js使用removeChild方法动态删除div元素
  • js通过八个点 拖动改变div大小的实现方法
  • JS控制一个DIV层在指定时间内消失的方法
  • js实现可拖动DIV的方法
  • ajax局部刷新一个div下jsp内容的方法
  • js 为label标签和div标签赋值的方法
  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
  • js innerHTML 改变div内容的方法
  • js固定DIV高度,超出部分自动添加滚动条的简单方法
  • js循环改变div颜色具体方法
  • 解决用jquery load加载页面到div时,不执行页面js的问题
  • js解决弹窗问题实现班级跳转DIV示例
  • js防止DIV布局滚动时闪动的解决方法

终极方案:用currentstyle或getcomputedstyle来获取属性。

<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>

复制代码 代码如下:

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:js无法获取隐蔽的div的宽窄只好先出示后收获,

关键词: 欧洲杯竞猜