用JS怎么获取某容器里的字体颜色和大小？

html是这么写的：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { color: #ff0000 }
</style>
</head><body>
<div id="b">
这里是容器字体
</div>
<scirpt>
//怎么用JS获取id="b"的那个容器的字体颜色？
</scirpt>
</body></html>实际上这个问题就是由CSS控制的页面样式，如何用JS去获取某个容器的样式属性。如果是直接写在html里的style可以容易地获取到，但是用CSS定义的貌似不好直接获取？不知道怎么操作

解决方案 »

  1.   

    IE:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style> 
    body { color: #ff0000 } 
    </style> 
    </head> <body> 
    <div id="b"> 
    这里是容器字体 
    </div> <script defer> 
    obj = document.getElementById("b");
    alert(obj.currentStyle.color)
    alert(obj.currentStyle.fontSize)
    </script>
    </body> 
    </html>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style> 
    body { color: #ff0000 } 
    </style> 
    </head> <body> 
    <div id="b"> 
    这里是容器字体 
    </div> <script defer> 
    obj = document.getElementById("b");
    if(document.all){
      alert(obj.currentStyle.color)
      alert(obj.currentStyle.fontSize)
    }
    else{
      alert(document.defaultView.getComputedStyle(obj,null).getPropertyValue('color'));
      alert(document.defaultView.getComputedStyle(obj,null).getPropertyValue('font-size'));
    }
    </script>
    </body> 
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style> 
    body { color: #ff0000 } 
    </style> 
    </head> <body> 
    <div id="b"> 
    这里是容器字体 
    </div> <script > 
     var currentStyle = function(element){
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
     }
    obj = document.getElementById("b");
    alert(currentStyle(obj)['fontSize'])
    alert(currentStyle(obj)['color'])
    </script>
    </body> 
    </html>