Javascript precisely retrieves style attributes (below)

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

We use a regular expression to check whether the regular expression is in rgb format. Instead, we use rgb2hex to convert it. However, if it is red or green, Firefox will not normally convert it to hex format, but IE remains the same. There is no way to make a hash by ourselves, get all the commonly used colors, and then one-to-one matching.Copy codeThe Code is as follows: if (style. search (/background | color /)! =-1 ){
Var color = {
Aqua: '# 0ff ',
Black: '#000 ',
Blue: '# 00f ',
Gray: '#808080 ',
Purple: '#800080 ',
Fuchsia: '# f0f ',
Green: '#008000 ',
Lime: '#0f0 ',
Maroon: '#800000 ',
Navy: '#000080 ',
Olive: '#808000 ',
Orange: '# ffa500 ',
Red: '# f00 ',
Silver: '# c0c0c0 ',
Teal: '#008080 ',
Transparent: 'rgba (0, 0, 0, 0 )',
White: '# fff ',
Yellow: '# ff0'
}
If (!! Color [value]) {
Value = color [value]
}
If (value = "inherit "){
Return getStyle (el. parentNode, style );
}
If (/^ rgb \ (\ d +), \ s * (\ d +), \ s * (\ d +) \) $ /. test (value )){
Return rgb2hex (value)
} Else if (/^ #/. test (value )){
Value = value. replace ('#','');
Return "#" + (value. length = 3? Value. replace (/^ (\ w) $/, '$1 $1 $2 $2 $3 $ 3'): value );
}
Return value;
}

Basically, this is the exact value of CSS. Obviously, it still has many shortcomings, but both the layout and common styles are implemented. We also provide a constant q for determining the page rendering mode. For convenience, the method name has the same name as JQuery (only values can be taken, and values cannot be assigned. It will be slowly integrated with my addSheet function later ).Copy codeThe Code is as follows: (function (){
Var isQuirk = (document.doc umentMode )? (Document.doc umentMode = 5 )? True: false: (document. compatMode = "CSS1Compat ")? False: true );
Var isElement = function (el ){
Return !! (El & el. nodeType = 1 );
}
Var propCache = [];
Var propFloat =! + "\ V1 "? 'Stylefloat': 'cssfloat ';
Var camelize = function (attr ){
Return attr. replace (/\-(\ w)/g, function (all, letter ){
Return letter. toUpperCase ();
});
}
Var memorize = function (prop) {// meaning: check out form cache
Return propCache [prop] | (propCache [prop] = prop = 'float '? PropFloat: camelize (prop ));
}
Var getIEOpacity = function (el ){
Var filter;
If (!! Window. XDomainRequest ){
Filter = el. style. filter. match (/progid: DXImageTransform. Microsoft. Alpha \(.? Opacity = (.*).? \)/I );
} Else {
Filter = el. style. filter. match (/alpha \ (opacity = (. *) \)/I );
}
If (filter ){
Var value = parseFloat (filter [1]);
If (! IsNaN (value )){
Return value? Values/100: 0;
}
}
Return 1;
}
Var convertPixelValue = function (el, value ){
Var style = el. style, left = style. left, rsLeft = el. runtimeStyle. left;
El. runtimeStyle. left = el. currentStyle. left;
Style. left = value | 0;
Var px = style. pixelLeft;
Style. left = left; // restore Data
El. runtimeStyle. left = rsLeft; // restore Data
Return px + "px"
}
Var rgb2hex = function (rgb ){
Rgb = rgb. match (/^ rgb \ (\ d +), \ s * (\ d +), \ s * (\ d +) \) $ /);
Return "#" + tohex (rgb [1]) + tohex (rgb [2]) + tohex (rgb [3])
}
Var tohex = function (x ){
Var hexDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8 ', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
Return isNaN (x )? '00': hexDigits [(x-x % 16)/16] + hexDigits [x % 16];
}
Var getStyle = function (el, style ){
Var value;
If (! + "\ V1 "){
// Specially handle the opacity of IE
If (style = "opacity "){
Return getIEOpacity (el)
}
Value = el. currentStyle [memorize (style)];
// Handle the height and width of IE
If (/^ (height | width) $/. test (style )){
Var values = (style = 'width ')? ['Left', 'right']: ['top', 'bottom '], size = 0;
If (isQuirk ){
Return el [camelize ("offset-" + style)] + "px"
} Else {
Var client = parseFloat (el [camelize ("client-" + style)]),
PaddingA = parseFloat (getStyle (el, "padding-" + values [0]),
PaddingB = parseFloat (getStyle (el, "padding-" + values [1]);
Return (client-paddingA-paddingB) + "px ";
}
}
} Else {
If (style = "float "){
Style = propFloat;
}
Value = document. defaultView. getComputedStyle (el, null). getPropertyValue (style)
}
// All the following parts are used to convert the previous inaccurate values.
If (! /^ \ D + px $/. test (value )){
// Convert measurable values
If (/(em | pt | mm | cm | pc | in | ex | rem | vw | VL | vm | ch | gr) $/. test (value )){
Return convertPixelValue (el, value );
}
// Conversion percentage, excluding the font
If (/% $/. test (value) & style! = "Font-size "){
Return parseFloat (getStyle (el. parentNode, "width") * parseFloat (value)/100 + "px"
}
// Convert the thin medium thick of border
If (/^ (border). + (width) $/. test (style )){
Var s = style. replace ("width", "style "),
B = {
Thin: ["1px", "2px"],
Medium: ["3px", "4px"],
Thick: ["5px", "6px"]
};
If (value = "medium" & getStyle (el, s) = "none "){
Return "0px ";
}
Return !! Window. XDomainRequest? B [value] [0]: B [value] [1];
}
// Convert the auto of margin
If (/^ (margin). +/. test (style) & value = "auto "){
Var father = el. parentNode;
If (/MSIE 6/. test (navigator. userAgent) & getStyle (father, "text-align") = "center "){
Var fatherWidth = parseFloat (getStyle (father, "width ")),
_ Temp = getStyle (father, "position ");
Father. runtimeStyle. postion = "relative ";
Var offsetWidth = el. offsetWidth;
Father. runtimeStyle. postion = _ temp;
Return (fatherWidth-offsetWidth)/2 + "px ";
}
Return "0px ";
}
// Convert top | left | right | bottom's auto
If (/(top | left | right | bottom)/. test (style) & value = "auto "){
Return el. getBoundingClientRect () [style];
}
// Convert the color
If (style. search (/background | color /)! =-1 ){
Var color = {
Aqua: '# 0ff ',
Black: '#000 ',
Blue: '# 00f ',
Gray: '#808080 ',
Purple: '#800080 ',
Fuchsia: '# f0f ',
Green: '#008000 ',
Lime: '#0f0 ',
Maroon: '#800000 ',
Navy: '#000080 ',
Olive: '#808000 ',
Orange: '# ffa500 ',
Red: '# f00 ',
Silver: '# c0c0c0 ',
Teal: '#008080 ',
Transparent: 'rgba (0, 0, 0, 0 )',
White: '# fff ',
Yellow: '# ff0'
}
If (!! Color [value]) {
Value = color [value]
}
If (value = "inherit "){
Return getStyle (el. parentNode, style );
}
If (/^ rgb \ (\ d +), \ s * (\ d +), \ s * (\ d +) \) $ /. test (value )){
Return rgb2hex (value)
} Else if (/^ #/. test (value )){
Value = value. replace ('#','');
Return "#" + (value. length = 3? Value. replace (/^ (\ w) $/, '$1 $1 $2 $2 $3 $ 3'): value );
}
Return value;
}
}
Return value; // For example, 0px
}
Var css = function (){
Var a = arguments;
If (a. length = 1 ){
Return getStyle (this, a [0])
}
}
Var _ = function (el ){
Var el = isElement (el )? El: document. getElementById (el );
Var gene =! El. constructor? El: el. constructor. prototype;
Gene.css = css;
Gene. width = function (){
Return getStyle (this, "width ");
};
Gene. height = function (){
Return getStyle (this, "height ");
};
Return el
}
If (! Window. _) {// to avoid conflicts with JQuery $, I use _ as the unique global variable of the class library.
Window ['_'] = _;
}
_. Q = isQuirk;
})()

The usage is as follows:Copy codeThe Code is as follows: window. onload = function (){
Alert (_ ("ccc" ).css ("background-color "))
Alert (_ ("aaa" ).css ("width "))
Alert (_ (document. body). width ())
};

We can use this Dongxi research project document.bodyand document.doc umentElement.Copy codeThe Code is as follows: function text (){
Var body = document. body, html = document.doc umentElement;
_ ("W1"). innerHTML = _ (body). width ();
_ ("W2"). innerHTML = _ (html). width ();
_ ("H1"). innerHTML = _ (body). height ();
_ ("H2"). innerHTML = _ (html). height ();
_ ("Ml1"). innerHTML = _(body).css ("margin-left ");
_ ("Ml2"). innerHTML = _(html#.css ("margin-left ");
_ ("Mr1"). innerHTML = _(body).css ("margin-right ");
_ ("Mr2"). innerHTML = _(html#.css ("margin-right ");
_ ("Mt1"). innerHTML = _(body).css ("margin-top ");
_ ("Mt2"). innerHTML = _(html#.css ("margin-top ");
_ ("Mb1"). innerHTML = _(body).css ("margin-bottom ");
_ ("Mb2"). innerHTML = _(html#.css ("margin-bottom ");
_ ("Pl1"). innerHTML = _(body).css ("padding-left ");
_ ("Pl2"). innerHTML = _(html#.css ("padding-left ");
_ ("Pr1"). innerHTML = _(body).css ("padding-right ");
_ ("Pr2"). innerHTML = _(html#.css ("padding-right ");
_ ("Bl1"). innerHTML = _(body).css ("border-left-width ");
_ ("Bl2"). innerHTML = _(html#.css ("border-left-width ");
_ ("Br1"). innerHTML = _(body).css ("border-right-width ");
_ ("Br2"). innerHTML = _(html#.css ("border-right-width ");
_ ("Qqq"). innerHTML =! _. Q? "Standard mode": "Strange mode ";
_ ("T1"). innerHTML = _(body).css ("top ");
_ ("T2"). innerHTML = _(html#.css ("top ");
_ ("L1"). innerHTML = _(body).css ("left ");
_ ("L2"). innerHTML = _(html#.css ("left ");
_ ("Ot1"). innerHTML = body. offsetTop;
_ ("Ot2"). innerHTML = html. offsetTop;
_ ("Ol1"). innerHTML = body. offsetLeft;
_ ("Ol2"). innerHTML = html. offsetLeft;
_ ("Ct1"). innerHTML = body. clientTop;
_ ("Ct2"). innerHTML = html. clientTop;
_ ("Cl1"). innerHTML = body. clientLeft;
_ ("Cl2"). innerHTML = html. clientLeft;
_ ("Cw1"). innerHTML = body. clientWidth;
_ ("Cw2"). innerHTML = html. clientWidth;
_ ("Ow1"). innerHTML = body. offsetWidth;
_ ("Ow2"). innerHTML = html. offsetWidth;
_ ("Sw1"). innerHTML = body. scrollWidth;
_ ("Sw2"). innerHTML = html. scrollWidth;
}

Dir = "ltr" lang = "zh-CN" id = "html">

Test attributes	Document. body	Document.doc umentElement
Width
Height
Margin-left
Margin-right
Margin-top
Margin-bottom
Padding-left
Padding-right
Border-left-width
Border-right-width
Rendering Mode
Top
Left
OffsetTop
OffsetLeft
ClientTop
ClientLeft
OffsetWidth
ClientWidth
ScrollWidth

Run code