标题:怎样用网页的宽度减去层的宽度
只看楼主
ikonglin
Rank: 2
来 自:中国
等 级:论坛游民
帖 子:71
专家分:38
注 册:2008-4-26
结帖率:47.37%
 问题点数:0 回复次数:2 
怎样用网页的宽度减去层的宽度
<div id="div1" style="position:absolute;width:300">
我用document.body.width-div1.style.width怎么不能得出结果,测试div1.style.width的值是300px,怎样才能把px去掉,变成数值参加运算
搜索更多相关主题的帖子: 宽度 网页 body document 数值 
2008-04-26 11:38
kingyar
Rank: 1
等 级:新手上路
帖 子:19
专家分:0
注 册:2008-4-26
得分:0 
如果你需要从"300px"中得到数值"300",使用:parseInt就可以。例如:
parseInt(div1.style.width)

但你现在直接使用元素的style属性中的width属性取得元素宽度,这种做法存在问题:如果div元素是通过class或id使用外部的CSS样式表,那么在程序中读取div.style.width时,读到的值是一个空字符串。

较好的解决办法:
1. 获取窗口宽度:
function getWindowWidth()
{
    var windowWidth;
    
    if (self.innerHeight) {    // all except Explorer
        if(document.documentElement.clientWidth){
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
    }    
   
    return windowWidth;
}

2 获取元素宽度:(源自prototype)
  function  getElemWidth(element)
{
    var display = element.style.display;
    if (display != 'none' && display != null) // Safari bug
      return element.offsetWidth;
    
    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'block';
    var originalWidth = element.clientWidth;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return originalWidth;
}

通过以上两种发法分别获取窗口宽度和元素宽度,会更加可靠。
2008-04-26 18:14
ikonglin
Rank: 2
来 自:中国
等 级:论坛游民
帖 子:71
专家分:38
注 册:2008-4-26
得分:0 
谢谢,好好学习一下
2008-04-26 18:18



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-211192-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.702404 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved