API: dom IEStyle.js (YUI Library)

# Yahoo! UI Library

### dom 2.8.1

Yahoo! UI Library > dom > IEStyle.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    (function() {
    /**
     * Internal methods used to add style management functionality to DOM.
     * @module dom
     * @class IEStyle
     * @namespace YAHOO.util.Dom
     */

    var Y = YAHOO.util,
        CLIENT_TOP = 'clientTop',
        CLIENT_LEFT = 'clientLeft',
        PARENT_NODE = 'parentNode',
        RIGHT = 'right',
        HAS_LAYOUT = 'hasLayout',
        PX = 'px',
        OPACITY = 'opacity',
        AUTO = 'auto',
        BORDER_LEFT_WIDTH = 'borderLeftWidth',
        BORDER_TOP_WIDTH = 'borderTopWidth',
        BORDER_RIGHT_WIDTH = 'borderRightWidth',
        BORDER_BOTTOM_WIDTH = 'borderBottomWidth',
        VISIBLE = 'visible',
        TRANSPARENT = 'transparent',
        HEIGHT = 'height',
        WIDTH = 'width',
        STYLE = 'style',
        CURRENT_STYLE = 'currentStyle',

    // IE getComputedStyle
    // TODO: unit-less lineHeight (e.g. 1.22)
        re_size = /^width|height$/,
        re_unit = /^(\d[.\d]*)+(em|ex|px|gd|rem|vw|vh|vm|ch|mm|cm|in|pt|pc|deg|rad|ms|s|hz|khz|%){1}?/i,

        ComputedStyle = {
            /**
            * @method get
            * @description Method used by DOM to get style information for IE
            * @param {HTMLElement} el The element to check
            * @param {String} property The property to check
            * @returns {String} The computed style
            */
            get: function(el, property) {
                var value = '',
                    current = el[CURRENT_STYLE][property];

                if (property === OPACITY) {
                    value = Y.Dom.getStyle(el, OPACITY);
                } else if (!current || (current.indexOf && current.indexOf(PX) > -1)) { // no need to convert
                    value = current;
                } else if (Y.Dom.IE_COMPUTED[property]) { // use compute function
                    value = Y.Dom.IE_COMPUTED[property](el, property);
                } else if (re_unit.test(current)) { // convert to pixel
                    value = Y.Dom.IE.ComputedStyle.getPixel(el, property);
                } else {
                    value = current;
                }

                return value;
            },
            /**
            * @method getOffset
            * @description Determine the offset of an element
            * @param {HTMLElement} el The element to check
            * @param {String} prop The property to check.
            * @return {String} The offset
            */
            getOffset: function(el, prop) {
                var current = el[CURRENT_STYLE][prop],                        // value of "width", "top", etc.
                    capped = prop.charAt(0).toUpperCase() + prop.substr(1), // "Width", "Top", etc.
                    offset = 'offset' + capped,                             // "offsetWidth", "offsetTop", etc.
                    pixel = 'pixel' + capped,                               // "pixelWidth", "pixelTop", etc.
                    value = '',
                    actual;

                if (current == AUTO) {
                    actual = el[offset]; // offsetHeight/Top etc.
                    if (actual === undefined) { // likely "right" or "bottom"
                        value = 0;
                    }

                    value = actual;
                    if (re_size.test(prop)) { // account for box model diff
                        el[STYLE][prop] = actual;
                        if (el[offset] > actual) {
                            // the difference is padding + border (works in Standards & Quirks modes)
                            value = actual - (el[offset] - actual);
                        }
                        el[STYLE][prop] = AUTO; // revert to auto
                    }
                } else { // convert units to px
                    if (!el[STYLE][pixel] && !el[STYLE][prop]) { // need to map style.width to currentStyle (no currentStyle.pixelWidth)
                        el[STYLE][prop] = current;              // no style.pixelWidth if no style.width
                    }
                    value = el[STYLE][pixel];
                }
                return value + PX;
            },
            /**
            * @method getBorderWidth
            * @description Try to determine the width of an elements border
            * @param {HTMLElement} el The element to check
            * @param {String} property The property to check
            * @return {String} The elements border width
            */
            getBorderWidth: function(el, property) {
                // clientHeight/Width = paddingBox (e.g. offsetWidth - borderWidth)
                // clientTop/Left = borderWidth
                var value = null;
                if (!el[CURRENT_STYLE][HAS_LAYOUT]) { // TODO: unset layout?
                    el[STYLE].zoom = 1; // need layout to measure client
                }

                switch(property) {
                    case BORDER_TOP_WIDTH:
                        value = el[CLIENT_TOP];
                        break;
                    case BORDER_BOTTOM_WIDTH:
                        value = el.offsetHeight - el.clientHeight - el[CLIENT_TOP];
                        break;
                    case BORDER_LEFT_WIDTH:
                        value = el[CLIENT_LEFT];
                        break;
                    case BORDER_RIGHT_WIDTH:
                        value = el.offsetWidth - el.clientWidth - el[CLIENT_LEFT];
                        break;
                }
                return value + PX;
            },
            /**
            * @method getPixel
            * @description Get the pixel value from a style property
            * @param {HTMLElement} node The element to check
            * @param {String} att The attribute to check
            * @return {String} The pixel value
            */
            getPixel: function(node, att) {
                // use pixelRight to convert to px
                var val = null,
                    styleRight = node[CURRENT_STYLE][RIGHT],
                    current = node[CURRENT_STYLE][att];

                node[STYLE][RIGHT] = current;
                val = node[STYLE].pixelRight;
                node[STYLE][RIGHT] = styleRight; // revert

                return val + PX;
            },

            /**
            * @method getMargin
            * @description Get the margin value from a style property
            * @param {HTMLElement} node The element to check
            * @param {String} att The attribute to check
            * @return {String} The margin value
            */
            getMargin: function(node, att) {
                var val;
                if (node[CURRENT_STYLE][att] == AUTO) {
                    val = 0 + PX;
                } else {
                    val = Y.Dom.IE.ComputedStyle.getPixel(node, att);
                }
                return val;
            },

            /**
            * @method getVisibility
            * @description Get the visibility of an element
            * @param {HTMLElement} node The element to check
            * @param {String} att The attribute to check
            * @return {String} The value
            */
            getVisibility: function(node, att) {
                var current;
                while ( (current = node[CURRENT_STYLE]) && current[att] == 'inherit') { // NOTE: assignment in test
                    node = node[PARENT_NODE];
                }
                return (current) ? current[att] : VISIBLE;
            },

            /**
            * @method getColor
            * @description Get the color of an element
            * @param {HTMLElement} node The element to check
            * @param {String} att The attribute to check
            * @return {String} The value
            */
            getColor: function(node, att) {
                return Y.Dom.Color.toRGB(node[CURRENT_STYLE][att]) || TRANSPARENT;
            },

            /**
            * @method getBorderColor
            * @description Get the bordercolor of an element
            * @param {HTMLElement} node The element to check
            * @param {String} att The attribute to check
            * @return {String} The value
            */
            getBorderColor: function(node, att) {
                var current = node[CURRENT_STYLE],
                    val = current[att] || current.color;
                return Y.Dom.Color.toRGB(Y.Dom.Color.toHex(val));
            }

        },

    //fontSize: getPixelFont,
        IEComputed = {};

    IEComputed.top = IEComputed.right = IEComputed.bottom = IEComputed.left =
            IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset;

    IEComputed.color = ComputedStyle.getColor;

    IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =
            IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =
            ComputedStyle.getBorderWidth;

    IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =
            IEComputed.marginLeft = ComputedStyle.getMargin;

    IEComputed.visibility = ComputedStyle.getVisibility;
    IEComputed.borderColor = IEComputed.borderTopColor =
            IEComputed.borderRightColor = IEComputed.borderBottomColor =
            IEComputed.borderLeftColor = ComputedStyle.getBorderColor;

    Y.Dom.IE_COMPUTED = IEComputed;
    Y.Dom.IE_ComputedStyle = ComputedStyle;
    })();

Copyright © 2010 Yahoo! Inc. All rights reserved.