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

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

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

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

FireFox下：

IE下：

Chrome下：

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

IE下：

Chrome下：

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

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

CSS Code:

FireFox：

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

Chrome:

Chrome毫无压力

IE:

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

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

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

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

FireFox:

IE:

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