2013-11-30

JavaScript从CSS读取样式

有些项目需要简单能配置一些样式。以前一直是把配置信息写在js文件中，这次改变主意把配置的信息写在css文件中，因为都是一些样式的配置，不仅方便而且还不用担心用户js语法写错引起程序报错的问题。

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

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

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

FF:

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

IE:

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

Chrome:

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

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

IE下:

>> 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:

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

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

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

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

CSS

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

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

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

Chrome，毫无压力

$(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"

IE与FireFox一样只能读取宽高

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

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

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

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

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

FireFox

>>>  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

>> 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的年代已逐渐远去

琼台博客

JavaScript从CSS读取样式

推荐文章