关于JavaScript从CSS读取样式信息的一些过程

开发WEB项目给客户，经常要保留一些配置的文件给客户简单配置，这次也不例外，客户要简单能配置一些样式。以前一直是把配置信息写在js文件中，这次改变主意把配置的信息写在CSS文件中，因为都是一些样式的配置，不仅方便而且还不用担心用户js语法写错引起程序报错的问题。

于是，就又了一些基本的问题，如何读取这些样式？当然，最简单的引入客户配置的CSS样式即可。但在一些复杂的UI交互界面时这显得不够灵活，需要提前预知客户给了多少宽高然后才能去做更多的操作，大个比方要把一个用户设置好的DIV居中，但你不知道用户给DIV多少宽高，于是需要先读取宽高，然后才能把DIV居中。假设用户已经给出了样式：

1 2 3 4

.box {     width:80px;     height:80px; }

想要获得用户设置的宽高通常可以这么干：

FireFox下：

1 2 3 4 5 6 7 8 9 10

>>> var div = document.createElement("div"); undefined >>> div.className = "box" "box" >>> $(div).width() 80 >>> $(div).height() 80 >>> $(div).remove() Object[div.box]

IE下：

1 2 3 4 5 6 7

>> var div = document.createElement("div"); >> div.className = "box"; "box" >> $(div).width(); 0 >> $(div).height(); 0

Chrome下：

1 2 3 4 5 6 7 8

var div = document.createElement("div"); undefined div.className = "box"; "box" $(div).width(); 0 $(div).height(); 0

我们发现只有在FireFox下，才能获取宽高，在IE与Chrome下却无法获取任何样式，好诡异。于是可以这样解决：

IE下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

>> document.body.appendChild(div) [object HTMLDivElement] {     align : "",     noWrap : false,     dataFld : "",     dataFormatAs : "",     dataSrc : "",     currentStyle : [object MSCurrentStyleCSSProperties],     runtimeStyle : [object MSStyleCSSProperties],     accessKey : "",     classList : box,     className : "box"     ... } 添加以监视 >> $(div).height(); 80 >> $(div).height(); 80 >> $(div).remove();

Chrome下：

1 2 3 4 5 6 7

document.body.appendChild(div); <div class=​"box">​</div>​ $(div).width(); 80 $(div).height(); 80 $(div).remove();

因为我们创建这个DIV只是为了获取用户设置的宽高信息，所以这个DIV毫无实际作用最后需要删掉否则影响布局，你要稍微讲究可以在这么干：

1 2 3 4

$(div).css({     "position":"absolute",     "left":"88888px" });

如果用户设置了border与padding属性，那么实际div的宽度又不一样了，那如何获取border样式呢？

CSS Code:

1 2 3 4 5 6

.box {     width:80px;     height:80px;     border:2pxsolid #000;     padding:5px; }

FireFox：

1 2 3 4 5 6 7 8 9 10 11 12

>>> $(div).css("width") "80px" >>> $(div).css("height") "80px" >>> $(div).css("border") "" >>> $(div).css("borderWidth") "" >>> $(div).css("border-width") "" >>> $(div).css("padding") ""

能获取宽和高，却获取不到border与padding样式

Chrome:

1 2 3 4 5 6 7 8 9 10 11 12

$(div).css("width") "80px" $(div).css("height") "80px" $(div).css("border") "2px solid rgb(0, 0, 0)" $(div).css("border-width") "2px" $(div).css("borderWidth") "2px" $(div).css("padding") "5px"

Chrome毫无压力

IE:

1 2 3 4 5 6 7 8 9 10 11 12

>> $(div).css("width"); "80px" >> $(div).css("height"); "80px" >> $(div).css("border"); "" >> $(div).css("border-width"); "" >> $(div).css("borderWidth"); "" >> $(div).css("padding"); ""

与FireFox一样只能读取宽高。。。

但FireFox中，以下的测试更让我疑惑：

1 2 3 4 5 6 7 8 9 10

>>> div.style.border "" >>> div.style.borderWidth "" >>> $(div).css("border","5px solid red"); Object[div.box] >>> $(div).css("border") "" >>> div.style.borderWidth "5px"

jQuery给border设置了border属性以后自己居然不能读取，而通过原生style对象却能正常读取的到，不知道jQuery的读取css的border是如何写。

对于在IE与FireFox中无法读取border与padding问题可以通过jQuery的outerWidth与outerHeight方法读取实际宽高

FireFox:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

>>>  var div = document.createElement("div");   undefined >>> div.className = "box" "box" >>> document.body.appendChild(div) <div class="box"> >>> div.style.width "" >>> $(div).css("width") "80px" >>> $(div).css("height") "80px" >>> $(div).outerWidth() 94 >>> $(div).outerHeight() 94

 

IE:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

>> var div = document.createElement("div"); >> div.className = "box"; "box" >> document.body.appendChild(div) [object HTMLDivElement] {     align : "",     noWrap : false,     dataFld : "",     dataFormatAs : "",     dataSrc : "",     currentStyle : [object MSCurrentStyleCSSProperties],     runtimeStyle : [object MSStyleCSSProperties],     accessKey : "",     classList : box,     className : "box"     ... } 添加以监视 >> $(div).css("width") "80px" >> $(div).css("height") "80px" >> $(div).outerWidth(); 94 >> $(div).outerHeight(); 94

看来浏览器的兼容依然是Web前端开发的阻力，虽然IE6的年代已逐渐远去！