Javascript precisely retrieves style attributes (below)

Source: Internet
Author: User

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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.