Hot For Coding
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的outerWidthouterHeight方法读取实际宽高

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

IE

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

TITLE: JavaScript从CSS读取样式

LINK: https://www.qttc.net/387_javascript_read_css.html

NOTE: 转载内容请注明出处