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

JavaScript 2013-11-30 JavaScript,style,css

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

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

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

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

FireFox下:

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

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

FireFox:

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

能获取宽和高,却获取不到border与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"

Chrome毫无压力

IE:

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

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

但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设置了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

 

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

文字链接:《关于JavaScript从CSS读取样式信息的一些过程

文章地址:http://www.qttc.net/201311387.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?