none
关于IE8的下一个CSS 样式取样问题 RRS feed

  • 问题

  • 最近做毕设时,在IE8下测试了自己做的一个web应用,但是发现在页面onload后取元素例如div的宽度width等值时是空白的,必须在window.onload下显式初始化才能在后续的脚本中取到值。这是bug还是什么

    2009年4月4日 14:42

答案

  • 在单独的定义时,不支持obj.style.height 的写法,你的注释相当于给元素设置行内的定义。这个obj.style.height 写法只适用在行内的定义

    <div style="width:200px"></div>
    这种写法可以使用obj.style.width ,

    放在单独的文件或者 css定义里,需要使用下面的方法

    <html>
    
      <head>
    
        <script type="text/javascript">
    
         window.onload = function()
    
          { 
    
              var obj = getStyle(document.getElementById("mydiv"),"width");
    
              alert(obj);
    
          }
    
          
    
          function getStyle(oElm, strCssRule){
    
    			var strValue = "";
    
    			if(document.defaultView && document.defaultView.getComputedStyle){
    
    				strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    
    			}
    
    			else if(oElm.currentStyle){
    
    				strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
    
    					return p1.toUpperCase();
    
    				});
    
    				strValue = oElm.currentStyle[strCssRule];
    
    			}
    
    			return strValue;
    
    		}
    
    
    
       </script>
    
       <style type="text/css">
    
         #mydiv{
    
              width: 20px;
    
              height: 20px;
    
              border: solid;
    
         }
    
       </style>
    
      </head>
    
      <body>
    
         <div id="mydiv"></div>
    
      </body>
    
    </html>
    
    

    孟宪会
    2009年4月5日 9:40
    版主

全部回复

  • 是放在body的onload里面取不到?
    孟宪会
    2009年4月5日 0:04
    版主
  • 就像下面这样,如果去掉注释,就可以取到值,否则为空
    <html>
      <head>
        <script type="text/javascript">
          window.onload = function()
          { 
              var obj = document.getElementById("mydiv");
              //obj.style.width = 20;
              //obj.style.height = 20;
              alert(obj.style.width);
          }
       </script>
       <style type="text/css">
         #mydiv{
              width: 20px;
              height: 20px;
              border: solid;
         }
       </style>
      </head>
      <body>
         <div id="mydiv"></div>
      </body>
    </html>

    2009年4月5日 5:39
  • 在单独的定义时,不支持obj.style.height 的写法,你的注释相当于给元素设置行内的定义。这个obj.style.height 写法只适用在行内的定义

    <div style="width:200px"></div>
    这种写法可以使用obj.style.width ,

    放在单独的文件或者 css定义里,需要使用下面的方法

    <html>
    
      <head>
    
        <script type="text/javascript">
    
         window.onload = function()
    
          { 
    
              var obj = getStyle(document.getElementById("mydiv"),"width");
    
              alert(obj);
    
          }
    
          
    
          function getStyle(oElm, strCssRule){
    
    			var strValue = "";
    
    			if(document.defaultView && document.defaultView.getComputedStyle){
    
    				strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    
    			}
    
    			else if(oElm.currentStyle){
    
    				strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
    
    					return p1.toUpperCase();
    
    				});
    
    				strValue = oElm.currentStyle[strCssRule];
    
    			}
    
    			return strValue;
    
    		}
    
    
    
       </script>
    
       <style type="text/css">
    
         #mydiv{
    
              width: 20px;
    
              height: 20px;
    
              border: solid;
    
         }
    
       </style>
    
      </head>
    
      <body>
    
         <div id="mydiv"></div>
    
      </body>
    
    </html>
    
    

    孟宪会
    2009年4月5日 9:40
    版主
  • 谢谢,高手。。

    2009年4月5日 9:49