WEB开发网
开发学院网页设计JavaScript 精确获取样式属性（第2部分） 阅读

精确获取样式属性（第2部分）

　2009-09-08 00:00:00　来源：WEB开发网　　　
核心提示：继续上一部分，我们要看一下颜色，精确获取样式属性（第2部分），火狐好像不管三七二十一都会转变为rgb格式，不过我们通常比较习惯的是hex格式，虽然微软以打补丁的方法添加上document.documentElement（真拗口，难怪网景会失败），这就用到以下两函数，1.var rgb2hex = function(rg

继续上一部分，我们要看一下颜色。火狐好像不管三七二十一都会转变为rgb格式，不过我们通常比较习惯的是hex格式。这就用到以下两函数。

1.var rgb2hex = function(rgb) {
2.　　rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
3.　　return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3])
4.}
5.var tohex = function(x) {
6.　　var hexDigits = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
7.　　return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
8.}

我们用正则表达式在检测其是否为rgb格式，是就用rgb2hex来转换它。但如果是red，green等值呢，火狐就一反常态，转换为hex格式，但IE依然如故。我们没有办法，自己做一个哈希，把常用的颜色都弄进去，然后一一匹对便是。

01.if(style.search(/background|color/) != -1) {
02.　　var color = {
03.　　　　aqua: '#0ff',
04.　　　　black: '#000',
05.　　　　blue: '#00f',
06.　　　　gray: '#808080',
07.　　　　purple: '#800080',
08.　　　　fuchsia: '#f0f',
09.　　　　green: '#008000',
10.　　　　lime: '#0f0',
11.　　　　maroon: '#800000',
12.　　　　navy: '#000080',
13.　　　　olive: '#808000',
14.　　　　orange:'#ffa500',
15.　　　　red: '#f00',
16.　　　　silver: '#c0c0c0',
17.　　　　teal: '#008080',
18.　　　　transparent:'rgba(0,0,0,0)',
19.　　　　white: '#fff',
20.　　　　yellow: '#ff0'
21.　　}
22.　　if(!!color[value]){
23.　　　　value = color[value]
24.　　}
25.　　if(value == "inherit"){
26.　　　　return getStyle(el.parentNode,style);
27.　　}
28.　　if(/^rgb((d+),s*(d+),s*(d+))$/.test(value)){
29.　　　　return rgb2hex(value)
30.　　}else if(/^#/.test(value)){
31.　　　　value = value.replace('#', '');
32.　　　　return "#" +　 (value.length == 3 ? value.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : value);
33.　　}
34.　　return value;
35.}

基本上是对于CSS的精确取值就是这样，显然它还存在许多不足之处，但对于布局用的和常用的样式都实现了。还提供了一个判断页面渲染模式的常数q，为了方便，方法名与JQuery同名（只能取值，不能赋值，以后有空慢慢与我的addSheet函数整合到一起）。

001.(function(){
002.　　var isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true);
003.　　var isElement = function(el) {
004.　　　　return !!(el && el.nodeType == 1);
005.　　}
006.　　var propCache = [];
007.　　var propFloat = !+"v1" ? 'styleFloat' : 'cssFloat';
008.　　var camelize = function(attr){
009.　　　　return attr.replace(/-(w)/g, function(all, letter){
010.　　　　　　return letter.toUpperCase();
011.　　　　});
012.　　}
013.　　var memorize = function(prop) { //意思为：check out form cache
014.　　　　return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : camelize(prop));
015.　　}
016.　　var getIEOpacity = function(el){
017.　　　　var filter;
018.　　　　if(!!window.XDomainRequest){
019.　　　　　　filter = el.style.filter.match(/progid:DXImageTransform.Microsoft.Alpha(.?opacity=(.*).?)/i);
020.　　　　}else{
021.　　　　　　filter = el.style.filter.match(/alpha(opacity=(.*))/i);
022.　　　　}
023.　　　　if(filter){
024.　　　　　　var value = parseFloat(filter[1]);
025.　　　　　　if (!isNaN(value)) {
026.　　　　　　　　return value ? value / 100 : 0;
027.　　　　　　}
028.　　　　}
029.　　　　return 1;
030.　　}
031.　　var convertPixelValue = function(el, value){
032.　　　　var style = el.style,left = style.left,rsLeft = el.runtimeStyle.left;
033.　　　　el.runtimeStyle.left = el.currentStyle.left;
034.　　　　style.left = value || 0;
035.　　　　var px = style.pixelLeft;
036.　　　　style.left = left;//还原数据
037.　　　　el.runtimeStyle.left = rsLeft;//还原数据
038.　　　　return px + "px"
039.　　}
040.　　var rgb2hex = function(rgb) {
041.　　　　rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
042.　　　　return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3])
043.　　}
044.　　var tohex = function(x) {
045.　　　　var hexDigits = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
046.　　　　return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
047.　　}
048.　　var getStyle = function (el, style){
049.　　　　var value;
050.　　　　if(!+"v1"){
051.　　　　　　//特殊处理IE的opacity
052.　　　　　　if(style == "opacity"){
053.　　　　　　　　return getIEOpacity(el)
054.　　　　　　}
055.　　　　　　value = el.currentStyle[memorize(style)];
056.　　　　　　//特殊处理IE的height与width
057.　　　　　　if (/^(height|width)$/.test(style)){
058.　　　　　　　　var values = (style == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
059.　　　　　　　　if(isQuirk){
060.　　　　　　　　　　return el[camelize("offset-"+style)] + "px"
061.　　　　　　　　}else{
062.　　　　　　　　　　var client = parseFloat(el[camelize("client-"+style)]),
063.　　　　　　　　　　paddingA = parseFloat(getStyle(el, "padding-"+ values[0])),
064.　　　　　　　　　　paddingB = parseFloat(getStyle(el, "padding-"+ values[1]));
065.　　　　　　　　　　return (client - paddingA - paddingB)+"px";
066.　　　　　　　　}
067.　　　　　　}
068.　　　　}else{
069.　　　　　　if(style == "float"){
070.　　　　　　　　style = propFloat;
071.　　　　　　}
072.　　　　　　value = document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
073.　　　　}
074.　　　　//下面部分全部用来转换上面得出的非精确值
075.　　　　if(!/^d+px$/.test(value)){
076.　　　　　　//转换可度量的值
077.　　　　　　if(/(em|pt|mm|cm|pc|in|ex|rem|vw|vh|vm|ch|gr)$/.test(value)){
078.　　　　　　　　return convertPixelValue(el,value);
079.　　　　　　}
080.　　　　　　//转换百分比，不包括字体
081.　　　　　　if(/%$/.test(value) && style != "font-size"){
082.　　　　　　　　return parseFloat(getStyle(el.parentNode,"width")) * parseFloat(value) /100 + "px"
083.　　　　　　}
084.　　　　　　//转换border的thin medium thick
085.　　　　　　if(/^(border).+(width)$/.test(style)){
086.　　　　　　　　var s = style.replace("width","style"),
087.　　　　　　　　b　 = {
088.　　　　　　　　　　thin:["1px","2px"],
089.　　　　　　　　　　medium:["3px","4px"],
090.　　　　　　　　　　thick:["5px","6px"]
091.　　　　　　　　};
092.　　　　　　　　if(value == "medium" && getStyle(el,s) == "none"){
093.　　　　　　　　　　return "0px";
094.　　　　　　　　}
095.　　　　　　　　return !!window.XDomainRequest ? b[value][0] : b[value][1];
096.　　　　　　}
097.　　　　　　//转换margin的auto
098.　　　　　　if(/^(margin).+/.test(style) && value == "auto"){
099.　　　　　　　　var father = el.parentNode;
100.　　　　　　　　if(/MSIE 6/.test(navigator.userAgent) && getStyle(father,"text-align") == "center"){
101.　　　　　　　　　　var fatherWidth = parseFloat(getStyle(father,"width")),
102.　　　　　　　　　　_temp = getStyle(father,"position");
103.　　　　　　　　　　father.runtimeStyle.postion = "relative";
104.　　　　　　　　　　var offsetWidth = el.offsetWidth;
105.　　　　　　　　　　father.runtimeStyle.postion = _temp;
106.　　　　　　　　　　return (fatherWidth - offsetWidth)/2 + "px";
107.　　　　　　　　}
108.　　　　　　　　return "0px";
109.　　　　　　}
110.　　　　　　//转换top|left|right|bottom的auto
111.　　　　　　if(/(top|left|right|bottom)/.test(style) && value == "auto"){
112.　　　　　　　　return el.getBoundingClientRect()[style];
113.　　　　　　}
114.　　　　　　//转换颜色
115.　　　　　　if(style.search(/background|color/) != -1) {
116.　　　　　　　　var color = {
117.　　　　　　　　　　aqua: '#0ff',
118.　　　　　　　　　　black: '#000',
119.　　　　　　　　　　blue: '#00f',
120.　　　　　　　　　　gray: '#808080',
121.　　　　　　　　　　purple: '#800080',
122.　　　　　　　　　　fuchsia: '#f0f',
123.　　　　　　　　　　green: '#008000',
124.　　　　　　　　　　lime: '#0f0',
125.　　　　　　　　　　maroon: '#800000',
126.　　　　　　　　　　navy: '#000080',
127.　　　　　　　　　　olive: '#808000',
128.　　　　　　　　　　orange:'#ffa500',
129.　　　　　　　　　　red: '#f00',
130.　　　　　　　　　　silver: '#c0c0c0',
131.　　　　　　　　　　teal: '#008080',
132.　　　　　　　　　　transparent:'rgba(0,0,0,0)',
133.　　　　　　　　　　white: '#fff',
134.　　　　　　　　　　yellow: '#ff0'
135.　　　　　　　　}
136.　　　　　　　　if(!!color[value]){
137.　　　　　　　　　　value = color[value]
138.　　　　　　　　}
139.　　　　　　　　if(value == "inherit"){
140.　　　　　　　　　　return getStyle(el.parentNode,style);
141.　　　　　　　　}
142.　　　　　　　　if(/^rgb((d+),s*(d+),s*(d+))$/.test(value)){
143.　　　　　　　　　　return rgb2hex(value)
144.　　　　　　　　}else if(/^#/.test(value)){
145.　　　　　　　　　　value = value.replace('#', '');
146.　　　　　　　　　　return "#" +　 (value.length == 3 ? value.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : value);
147.　　　　　　　　}
148.　　　　　　　　return value;
149.　　　　　　}
150.　　　　}
151.　　　　return value;//如 0px
152.　　}
153.　　var css = function(){
154.　　　　var a = arguments;
155.　　　　if(a.length == 1){
156.　　　　　　return getStyle(this,a[0])
157.　　　　}
158.　　}
159.　　var _ = function(el){
160.　　　　var el = isElement(el)? el :document.getElementById(el);
161.　　　　var gene = !el.constructor ? el : el.constructor.prototype;
162.　　　　gene.css = css;
163.　　　　gene.width = function(){　
164.　　　　　　return getStyle(this,"width");
165.　　　　};
166.　　　　gene.height = function(){　
167.　　　　　　return getStyle(this,"height");
168.　　　　};
169.　　　　return el
170.　　}
171.　　if(!window._){ //为了避免与JQuery的$发生冲突，我用_作为类库唯一的全局变量
172.　　　　window['_'] =_;
173.　　}
174.　　_.q = isQuirk;
175.})()

用法如下：

1.window.onload = function(){
2.　　alert(_("ccc").css("background-color"))
3.　　alert(_("aaa").css("width"))
4.　　alert(_(document.body).width())
5.};

我们可以用这个东西研究一下document.body与document.documentElement。

01.function text(){
02.　　var body = document.body,html = document.documentElement;
03.　　_("w1").innerHTML = _(body).width();
04.　　_("w2").innerHTML = _(html).width();
05.　　_("h1").innerHTML = _(body).height();
06.　　_("h2").innerHTML = _(html).height();
07.　　_("ml1").innerHTML = _(body).css("margin-left");
08.　　_("ml2").innerHTML = _(html).css("margin-left");
09.　　_("mr1").innerHTML = _(body).css("margin-right");
10.　　_("mr2").innerHTML = _(html).css("margin-right");
11.　　_("mt1").innerHTML = _(body).css("margin-top");
12.　　_("mt2").innerHTML = _(html).css("margin-top");
13.　　_("mb1").innerHTML = _(body).css("margin-bottom");
14.　　_("mb2").innerHTML = _(html).css("margin-bottom");
15.　　_("pl1").innerHTML = _(body).css("padding-left");
16.　　_("pl2").innerHTML = _(html).css("padding-left");
17.　　_("pr1").innerHTML = _(body).css("padding-right");
18.　　_("pr2").innerHTML = _(html).css("padding-right");
19.　　_("bl1").innerHTML = _(body).css("border-left-width");
20.　　_("bl2").innerHTML = _(html).css("border-left-width");
21.　　_("br1").innerHTML = _(body).css("border-right-width");
22.　　_("br2").innerHTML = _(html).css("border-right-width");
23.　　_("qqq").innerHTML = !_.q ? "标准模式" : "怪癖模式";
24.　　_("t1").innerHTML = _(body).css("top");
25.　　_("t2").innerHTML = _(html).css("top");
26.　　_("l1").innerHTML = _(body).css("left");
27.　　_("l2").innerHTML = _(html).css("left");
28.　　_("ot1").innerHTML = body.offsetTop;
29.　　_("ot2").innerHTML = html.offsetTop;
30.　　_("ol1").innerHTML = body.offsetLeft;
31.　　_("ol2").innerHTML = html.offsetLeft;
32.　　_("ct1").innerHTML = body.clientTop;
33.　　_("ct2").innerHTML = html.clientTop;
34.　　_("cl1").innerHTML = body.clientLeft;
35.　　_("cl2").innerHTML = html.clientLeft;
36.　　_("cw1").innerHTML = body.clientWidth;
37.　　_("cw2").innerHTML = html.clientWidth;
38.　　_("ow1").innerHTML = body.offsetWidth;
39.　　_("ow2").innerHTML = html.offsetWidth;
40.　　_("sw1").innerHTML = body.scrollWidth;
41.　　_("sw2").innerHTML = html.scrollWidth;
42.}

　　 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

在标准模式下，火狐等浏览器中我们看到offsetWidth等值最大为1007，因为火狐的offsetWidth不大于clientWidth，而clientWidth是不包含滚动条（滚动条的宽都固定为17px）。在IE中，offsetWidth是比clientWidth多了两个border，由此发现问题，1024-1003-17=4，4应该是两个auto生成，而这个auto应该为border的值，这两个border在IE中是固定死，不能通过以下手段修改。

1.<style type="text/css">
2.　　html{
3.　　　　border: 0;
4.　　}
5.</style>

换言之，在标准模式下，IE的html是存在不可修改的宽为2px的border。也换言之，我的程序是有个BUG，没有正确显示出html的border为2px，囧。

再看怪癖模式，

测试属性document.bodydocument.documentElement
width　　
height　　
margin-left　　
margin-right　　
margin-top　　
margin-bottom　　
padding-left　　
padding-right　　
border-left-width　　
border-right-width　　
渲染模式
top　　
left　　
offsetTop　　
offsetLeft　　
clientTop　　
clientLeft　　
offsetWidth　　
clientWidth　　
scrollWidth　　

运行代码

火狐等没有所谓的怪癖模式，直接看IE的。发现那神秘的2px又出现，这时出现在document.body的clientTop，clientLeft中。那么怪癖模式下的document.body的clientTop，clientLeft又相当于CSS的什么概念呢？我们来看微软给出的一幅老图，那时IE5独步天下，没有所谓标准模式与怪癖模式之分，因此这幅图的东西都是按怪癖模式表示的。

精确获取样式属性（第2部分）

图片看不清楚？请点击这里查看原图（大图）。

不难看出，clientLeft相当于borderLeft，clientTop相当于borderTop。至于上面的border-left-width与border-right-width，就不要看了，是错误，因为我当初就没有考虑这两个元素在标准模式与怪癖模式下的问题。既然document.body的边框区就达1024px了，那么html元素的脸往哪里搁呢？！对不起，在微软早期的设想，body元素才是代表文档（一个强有力的证据是，在怪癖模式下，网页的滚动条是位于body元素中）。模准模式连同火狐那帮失败者宣扬的各种没有市场份额的“标准”，都是在微软极不情愿下支持的。你看，documentElement这样累赘傻气的名字像是微软起的吗？！如果是微软，它应该就叫html，和document.boy那样简洁。搞到在标准模式下，我们取scrollLeft，要用document.documentElement.scrollLeft，因为这时body不存在滚动条；在怪癖模式下，要用document.body，虽然微软以打补丁的方法添加上document.documentElement（真拗口，难怪网景会失败），但滚动条的位置不是说变就变。

编缉推荐阅读以下文章

  • 精确获取样式属性 （第一部分）

Tags：精确 获取 样式

编辑录入：爽爽　[复制链接] [打 印]
更多精彩
赞助商链接

热点阅读
焦点图片
最新推荐
精彩阅读