js 如何判断元素宽高样式 到底为 百分比、Auto或者PX？

Posted 2023-04-28

元素样式可能是外部的、嵌入的，也可能是行内的，这种情况如何判断？
jQuery的width()跟css("width")获取的都只是绝对的像素值，即使元素的样式设置为100%或者auto都一样。

参考技术A IE8 background 即时你写了颜色他也是undefined
background-color 颜色值 transparent

火狐 background 即时你写了颜色他也无法获取
background-color rgb格式 transparent

谷歌 background rgba(255, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
background-color rgb格式 rgba(0, 0, 0, 0)

还有background 不光可以写颜色，还可以写图片加颜色等，如果你只是按他们的默认值来判读是否有颜色的话，我感觉行不通，如果background :后面跟的是图片，jqury能获得值不是默认值，那你怎么判读他是否有背景色

不过也不是行不通的还有一个办法就是写一个方法把所有的颜色都转化为16进制
这个方法要具备这些功能
1、他能认识颜色值是英文名还是rgb格式的
2、把不是颜色多余的部分去掉 如"rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box“要截取成rgba(0, 0, 0, 0)

这个方法只能用在background-color上
因为IE、火狐取不到background-color的颜色值，即时你设置了追问

晕，完全不是一回事。

当元素的样式为display:none时获取他的宽高

其实这里可以用一个偷梁换柱的办法，把display:none改为 display:block;visibility:hidden;position:absolute;

在jquery的swap方法中实现了这种效果，我们来看源码：

 1 var swap = function( elem, options, callback ) {
 2     var ret, name,
 3         old = {};
 4 
 5     //记住旧的样式，并插入新的样式
 6     for ( name in options ) {
 7         old[ name ] = elem.style[ name ];
 8         elem.style[ name ] = options[ name ];
 9     }
10     
11     //执行回调并把指针指向dom元素
12     ret = callback.call( elem );
13 
14     //恢复旧的样式
15     for ( name in options ) {
16         elem.style[ name ] = old[ name ];
17     }
18 
19     return ret;
20 };

 

我们来做个例子试试看：

<style>
#d1{width:100px;height:100px;background:red;display:none;}
</style>

<div id="d1"></div>

 1 <script>
 2 var swap = function( elem, options, callback ) {
 3     var ret, name,
 4         old = {};
 5 
 6     // Remember the old values, and insert the new ones
 7     for ( name in options ) {
 8         old[ name ] = elem.style[ name ];
 9         elem.style[ name ] = options[ name ];
10     }
11 
12     ret = callback.call( elem );
13 
14     // Revert the old values
15     for ( name in options ) {
16         elem.style[ name ] = old[ name ];
17     }
18 
19     return ret;
20 };
21 
22 var el = document.getElementById(‘d1‘);
23 swap(el,{‘display‘:‘block‘,‘visibility‘:‘hidden‘,‘position‘:‘absolute‘},function(){
24 
25 　　alert(el.offsetWidth); //100
26 
27 });
28 </script>