document.getElementById("").style.width 得出来是百分比，如何得到实际的像素值？

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【cmxstudio】截止到2008-06-26 17:06:22的历史汇总数据(不包括此帖)：
发帖数:21                 发帖分:580
结贴数:11                 结贴分:370
未结数:10                 未结分:210
结贴率:52.38 %            结分率:63.79 %
楼主加油

你的得到他上一级node的width.也许 clientWidth 之类的可以用吧！

百分比？那就取得父对象的width来计算了

如果是百分比就只能通过他的parentNode来计算得到，如果还是百分比就parentNode.parentNode...一直往上寻

document.getElementById("").style.pixelWidth

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【cmxstudio】截止到2008-06-26 17:06:22的历史汇总数据(不包括此帖)：
发帖数:21                发帖分:580
结贴数:11                结贴分:370
未结数:10                未结分:210
结贴率:52.38 %            结分率:63.79 %
楼主加油clientWidth

应该有一个参照物吧比如<table width="400" border="1">
  <tr>
    <td><input type="text" id="test" style="width:20%;" ></td>
  </tr>
</table>我得到$("test").style.width为20％，像素应该是400*20％＝80吧

如果元素设置了style中的width则用:document.getElementById("id").style.width;
没有则用clientWidth..

个人认为clientWidth和pixelWidth存在严重的兼容性问题，测试了一下：<script type="text/javascript">
window.onload = function()
{
        //clientWidth在firefox chrome ie9中都是undefined
alert(document.getElementById('btn').style.clientWidth);
        //pixel在ie中正常输出150，但在firefox chrome中都是undefined
alert(document.getElementById('btn').style.pixelWidth);
        //采用父节点计算的方法在各个浏览器中表现正常，都是150
alert(parseInt(document.getElementById('btn').parentNode.style.width)*parseFloat(document.getElementById('btn').style.width)/100);
};
</script>
</head><body>
<div style="width:300px">
<button id="btn" style="width:50%">
</button>
</div>
</body>建议楼主采用父节点换算的方法，虽然麻烦了一点，但不存在兼容性问题。或者直接把元素的width设为像素值就不存在此问题。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body{margin:0;}
    </style>
    <script type="text/javascript">
        //功能: 取得对象的宽度值
        //使用限制: [ 在IE中没有任何问题. 限制只针对于非IE浏览器. ]
        //1. 如果是绝对定位的元素(或者如下计算过程中涉及到的父元素有绝对定位)是无法正确得到的.
        //2. 样式中应将body的margin设置为0, 否则如果需要计算body宽度时会有误差;
        function GetPixelWidth(obj) {
            //如果是ie, 直接返回其属性 pixelWidth
            if (! -[1, ])
                return obj.style.pixelWidth;
            var pwidth = obj.style.width + "";
            //如果节点为body, 则返回body的宽度
            if (obj === document.body) {
                var pageW = document.body.clientWidth ? document.body.clientWidth : document.documentElement.clientWidth;
                return pageW;
            }
            //如果节点的宽度不为0, 而且不含%, 返回其宽度
            if (pwidth.length>0 && pwidth.indexOf("%") == -1) {
                return obj.style.width;
            }
            //如果节点的宽度值为空(没有设置), 递归求其父节点的宽度
            if (pwidth.length == 0) {
                return parseInt(GetPixelWidth(obj.parentNode));
            }
            //如果节点的宽度值不为空, 而且包含%, 递归求父节点的宽度 * 自身的百分比
            return parseInt(GetPixelWidth(obj.parentNode))*parseFloat(obj.style.width)/100;
        }        function Test(id) {
            var divWidth = GetPixelWidth(document.getElementById("divTest"));
            alert(divWidth);
        }
    </script>
</head>
<body>
    <input type="button" value="Get Width" onclick="Test('divTest')" />
    <div>
        <div style="width:50%;" >
            <div id="divTest" style="width:63%;height:30%;border:1px solid red;" ></div>
        </div>
    </div>
</body>
</html>
上面的代码在IE/FF/Chrome中运行均能通过. 不过还有一些局限, 期待大侠和老鸟……

调试易

document.getElementById("").style.width 得出来是百分比，如何得到实际的像素值？

解决方案 »