javascript如何获得css指定的borderWidth和borderColor

如题。
document.getElementById("d").style.borderColor; document.getElementById("d").style.borderWidth; 这样获得不了。
下边是测试例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style type="text/css">
.c2{ 
width:400px; 
height:200px; 
border-color:red; 
border-width:2px;
border-style: solid;
background:#aaa;
}
  </style>
 </HEAD> <BODY>
  <div id="d" class="c2"></div>
 </BODY> <script type="text/javascript">
window.onload = function(){
var borderColor = document.getElementById("d").style.borderColor;// 空字符串""
var borderWidth = document.getElementById("d").style.borderWidth;// 空字符串""
var backgroundColor = document.getElementById("d").style.backgroundColor;// 空字符串""
//var width = document.getElementById("d").style.width;// 空字符串""
var width = document.getElementById("d").offsetWidth; // 400
alert("borderColor:" + borderColor + ", borderWidth: " + borderWidth + ", backgroundColor: " + backgroundColor + ", width: " + width);
}
 </script>
</HTML>我知道 document.getElementById("d").style.borderColor = "green"; 可以设置值，但我只想获得值，而且borderWidth和borderColor要用 css 指定。
请大家帮我看看如何解决，谢谢!

解决方案 »

  1.   

    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
        .c2{ 
            width:400px; 
            height:200px; 
            border-color:red; 
            border-width:2px;
            border-style: solid;
            background:#aaa;
        }
      </style>
     </HEAD> <BODY>
      <div id="d" class="c2"></div>
     </BODY> <script type="text/javascript">
        window.onload = function(){
            var borderColor = document.getElementById("d").currentStyle.borderColor;// 空字符串""
            var borderWidth = document.getElementById("d").currentStyle.borderWidth;// 空字符串""
            var backgroundColor = document.getElementById("d").currentStyle.backgroundColor;// 空字符串""
            //var width = document.getElementById("d").style.width;// 空字符串""
            var width = document.getElementById("d").offsetWidth; // 400
            alert("borderColor:" + borderColor + ", borderWidth: " + borderWidth + ", backgroundColor: " + backgroundColor + ", width: " + width);
        }
     </script>
    </HTML>
      

  2.   

    谢谢 lihui_shine，在 IE 里可以，在火狐里不行哦 document.getElementById("d").currentStyle is undefined，可以帮我在看看么
      

  3.   

    这样在 IE 和 FF 都可以了，^_^
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
        .c2{ 
            width:400px; 
            height:200px; 
            border-color:red; 
            border-width:2px;
            border-style: solid;
            background:#aaa;
        }
      </style>
     </HEAD> <BODY>
      <div id="d" class="c2"></div>
     </BODY> <script type="text/javascript">
        window.onload = function(){
    if(document.getElementById("d").currentStyle){ // for IE var borderColor = document.getElementById("d").currentStyle.borderColor;// 空字符串""
    var borderWidth = document.getElementById("d").currentStyle.borderWidth;// 空字符串""
    var backgroundColor = document.getElementById("d").currentStyle.backgroundColor;// 空字符串""
    //var width = document.getElementById("d").style.width;// 空字符串""
    var width = document.getElementById("d").offsetWidth; // 400
    alert("borderColor:" + borderColor + ", borderWidth: " + borderWidth + ", backgroundColor: " + backgroundColor + ", width: " + width); }else if(window.getComputedStyle){ // for FF var obj = document.getElementById("d");
    var borderColor = window.getComputedStyle(obj, null).getPropertyValue('border-top-color') + " " +
    window.getComputedStyle(obj, null).getPropertyValue('border-right-color') + " " +
    window.getComputedStyle(obj, null).getPropertyValue('border-bottom-color') + " " +
    window.getComputedStyle(obj, null).getPropertyValue('border-left-color');
    var borderWidth = window.getComputedStyle(obj, null).getPropertyValue('border-top-width') + " " +
    window.getComputedStyle(obj, null).getPropertyValue('border-right-width') + " " +
    window.getComputedStyle(obj, null).getPropertyValue('border-bottom-width') + " " +
    window.getComputedStyle(obj, null).getPropertyValue('border-left-width'); alert("borderColor:" + borderColor + ", borderWidth:" + borderWidth);
    }
        }
     </script>
    </HTML>