Namespace goog.style
code »Global Functions
Clears the background image of an element in a browser independent manner.
Parameters |
---|
|
Call fn
on element
such that element
's dimensions are
accurate when it's passed to fn
.
fn
on element
such that element
's dimensions are
accurate when it's passed to fn
.code »goog.style.getBackgroundColor ( element ) ⇒ string
Retrieves the computed background color string for a given element. The
string returned is suitable for assigning to another element's
background-color, but is not guaranteed to be in any particular string
format. Accessing the color in a numeric form may not be possible in all
browsers or with all input.
If the background color for the element is defined as a hexadecimal value,
the resulting string can be parsed by goog.color.parse in all supported
browsers.
Whether named colors like "red" or "lightblue" get translated into a
format which can be parsed is browser dependent. Calling this function on
transparent elements will return "transparent" in most browsers or
"rgba(0, 0, 0, 0)" in WebKit.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getBorderBox ( element ) ⇒ !goog.math.Box
Gets the computed border widths (on all sides) in pixels
!goog.math.Box
Parameters |
---|
|
Returns |
|
code »goog.style.getBorderBoxSize ( element ) ⇒ !goog.math.Size
Gets the border box size for an element.
!goog.math.Size
Parameters |
---|
|
Returns |
|
Gets the client rectangle of the DOM element.
getBoundingClientRect is part of a new CSS object model draft (with a
long-time presence in IE), replacing the error-prone parent offset
computation and the now-deprecated Gecko getBoxObjectFor.
This utility patches common browser bugs in getBoundingClientRect. It
will fail if getBoundingClientRect is unsupported.
If the element is not in the DOM, the result is undefined, and an error may
be thrown depending on user agent.
Parameters |
---|
|
Returns |
|
code »goog.style.getBounds ( element ) ⇒ !goog.math.Rect
Returns a bounding rectangle for a given element in page space.
!goog.math.Rect
Parameters |
---|
|
Returns |
|
code »goog.style.getBox_ ( element, stylePrefix ) ⇒ !goog.math.Box
Gets the computed paddings or margins (on all sides) in pixels.
!goog.math.Box
code »goog.style.getCascadedStyle ( element, style ) ⇒ string
Gets the cascaded style value of a node, or null if the value cannot be
computed (only Internet Explorer can do this).
string
Returns clientLeft (width of the left border and, if the directionality is
right to left, the vertical scrollbar) and clientTop as a coordinate object.
Parameters |
---|
|
Returns |
|
Returns the position of the event or the element's border box relative to
the client viewport.
Parameters |
---|
|
Returns |
|
Returns the position of the event or the element's border box relative to
the client viewport.
Parameters |
---|
|
Returns |
|
code »goog.style.getClientViewportElement ( opt_node ) ⇒ Element
Returns the viewport element for a particular document
Element
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedBoxSizing ( element ) ⇒ ?string
Retrieves the computed value of the box-sizing CSS attribute.
Browser support: http://caniuse.com/css3-boxsizing.
?string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedCursor ( element ) ⇒ string
Retrieves the computed value of the cursor CSS attribute.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedOverflowX ( element ) ⇒ string
Retrieves the computed value of the overflow-x CSS attribute.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedOverflowY ( element ) ⇒ string
Retrieves the computed value of the overflow-y CSS attribute.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedPosition ( element ) ⇒ string
Retrieves the computed value of the position CSS attribute.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedStyle ( element, property ) ⇒ string
Retrieves a computed style value of a node. It returns empty string if the
value cannot be computed (which will be the case in Internet Explorer) or
"none" if the property requested is an SVG one and it has not been
explicitly set (firefox and webkit).
string
code »goog.style.getComputedTextAlign ( element ) ⇒ string
Retrieves the computed value of the text-align CSS attribute.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedTransform ( element ) ⇒ string
Retrieves the computed value of the CSS transform attribute.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getComputedZIndex ( element ) ⇒ (string|number)
Retrieves the computed value of the z-index CSS attribute.
(string|number)
Parameters |
---|
|
Returns |
|
code »goog.style.getContainerOffsetToScrollInto ( element, container, opt_center ) ⇒ !goog.math.Coordinate
Calculate the scroll position of container
with the minimum amount so
that the content and the borders of the given element
become visible.
If the element is bigger than the container, its top left corner will be
aligned as close to the container's top left corner as possible.
!goog.math.Coordinate
container
with the minimum amount so
that the content and the borders of the given element
become visible.
If the element is bigger than the container, its top left corner will be
aligned as close to the container's top left corner as possible.code »goog.style.getContentBoxSize ( element ) ⇒ !goog.math.Size
Gets the content box size for an element. This is potentially expensive in
all browsers.
!goog.math.Size
Parameters |
---|
|
Returns |
|
code »goog.style.getCssTranslation ( element ) ⇒ !goog.math.Coordinate
Returns the x,y translation component of any CSS transforms applied to the
element, in pixels.
!goog.math.Coordinate
Parameters |
---|
|
Returns |
|
code »goog.style.getFloat ( el ) ⇒ string
Gets value of explicitly-set float CSS property on an element.
string
Parameters |
---|
|
Returns |
|
code »goog.style.getFontFamily ( el ) ⇒ string
Returns the font face applied to a given node. Opera and IE should return
the font actually displayed. Firefox returns the author's most-preferred
font (whether the browser is capable of displaying it or not.)
string
Parameters |
---|
|
Returns |
|
code »goog.style.getFontSize ( el ) ⇒ number
Returns the font size, in pixels, of text in an element.
number
Parameters |
---|
|
Returns |
|
code »goog.style.getFramedPageOffset ( el, relativeWin ) ⇒ !goog.math.Coordinate
Returns a Coordinate object relative to the top-left of an HTML document
in an ancestor frame of this element. Used for measuring the position of
an element inside a frame relative to a containing frame.
!goog.math.Coordinate
Parameters |
---|
|
Returns |
|
code »goog.style.getIePixelBorder_ ( element, prop ) ⇒ number
Helper function for IE to get the pixel border.
number
code »goog.style.getIePixelDistance_ ( element, propName ) ⇒ number
Helper function for getting the pixel padding or margin for IE.
number
code »goog.style.getIePixelValue_ ( element, value, name, pixelName ) ⇒ number
IE specific function that converts a non pixel unit to pixels.
number
Parameters |
---|
|
Returns |
|
code »goog.style.getLengthUnits ( value ) ⇒ ?string
Returns the units used for a CSS length measurement.
?string
Parameters |
---|
|
Returns |
|
code »goog.style.getMarginBox ( element ) ⇒ !goog.math.Box
Gets the computed margins (on all sides) in pixels.
!goog.math.Box
Parameters |
---|
|
Returns |
|
code »goog.style.getOffsetParent ( element ) ⇒ Element
Returns the first parent that could affect the position of a given element.
Element
Parameters |
---|
|
Returns |
|
code »goog.style.getOpacity ( el ) ⇒ (number|string)
Gets the opacity of a node (x-browser). This gets the inline style opacity
of the node, and does not take into account the cascaded or the computed
style for this node.
(number|string)
Parameters |
---|
|
Returns |
''
if the opacity is not set. |
code »goog.style.getPaddingBox ( element ) ⇒ !goog.math.Box
Gets the computed paddings (on all sides) in pixels.
!goog.math.Box
Parameters |
---|
|
Returns |
|
Returns a Coordinate object relative to the top-left of the HTML document.
Implemented as a single function to save having to do two recursive loops in
opera and safari just to get both coordinates. If you just want one value do
use goog.style.getPageOffsetLeft() and goog.style.getPageOffsetTop(), but
note if you call both those methods the tree will be analysed twice.
Parameters |
---|
|
Returns |
|
code »goog.style.getPageOffsetLeft ( el ) ⇒ number
Returns the left coordinate of an element relative to the HTML document
number
Parameters |
---|
|
Returns |
|
code »goog.style.getPageOffsetTop ( el ) ⇒ number
Returns the top coordinate of an element relative to the HTML document
number
Parameters |
---|
|
Returns |
|
code »goog.style.getPixelStyleValue_ ( value, round ) ⇒ string
Helper function to create a string to be set into a pixel-value style
property of an element. Can round to the nearest integer value.
string
code »goog.style.getPosition ( element ) ⇒ !goog.math.Coordinate
Gets the offsetLeft and offsetTop properties of an element and returns them
in a Coordinate object
!goog.math.Coordinate
Parameters |
---|
|
Returns |
|
Returns the position of an element relative to another element in the
document. A relative to B
Parameters |
---|
|
Returns |
|
code »goog.style.getScrollbarWidth ( opt_className ) ⇒ number
Returns the scroll bar width (represents the width of both horizontal
and vertical scroll).
number
Parameters |
---|
|
Returns |
|
code »goog.style.getSize ( element ) ⇒ !goog.math.Size
Gets the height and width of an element, even if its display is none.
Specifically, this returns the height and width of the border box,
irrespective of the box model in effect.
Note that this function does not take CSS transforms into account. Please see
goog.style.getTransformedSize
.
!goog.math.Size
goog.style.getTransformedSize
.Parameters |
---|
|
Returns |
|
code »goog.style.getSizeWithDisplay_ ( element ) ⇒ !goog.math.Size
Gets the height and width of an element when the display is not none.
!goog.math.Size
Parameters |
---|
|
Returns |
|
code »goog.style.getStyle ( element, property ) ⇒ string
Retrieves an explicitly-set style value of a node. This returns '' if there
isn't a style attribute on the element or if this style property has not been
explicitly set in script.
string
code »goog.style.getStyle_ ( element, style ) ⇒ string
Cross-browser pseudo get computed style. It returns the computed style where
available. If not available it tries the cascaded style value (IE
currentStyle) and in worst case the inline style value. It shouldn't be
called directly, see http://wiki/Main/ComputedStyleVsCascadedStyle for
discussion.
string
code »goog.style.getTransformedSize ( element ) ⇒ goog.math.Size
Gets the height and width of an element, post transform, even if its display
is none.
This is like goog.style.getSize
, except:
- Takes webkitTransforms such as rotate and scale into account.
- Will return null if
element
doesn't respond to
getBoundingClientRect
.
- Currently doesn't make sense on non-WebKit browsers which don't support
webkitTransforms.
goog.math.Size
goog.style.getSize
, except:
element
doesn't respond to
getBoundingClientRect
.
Parameters |
---|
|
Returns |
|
code »goog.style.getVendorJsStyleName_ ( element, style ) ⇒ string
Returns the style property name in camel-case. If it does not exist and a
vendor-specific version of the property does exist, then return the vendor-
specific property name instead.
string
code »goog.style.getVendorStyleName_ ( element, style ) ⇒ string
Returns the style property name in CSS notation. If it does not exist and a
vendor-specific version of the property does exist, then return the vendor-
specific property name instead.
string
Calculates the viewport coordinates relative to the page/document
containing the node. The viewport may be the browser viewport for
non-iframe document, or the iframe container for iframe'd document.
Parameters |
---|
|
Returns |
|
code »goog.style.getVisibleRectForElement ( element ) ⇒ goog.math.Box
Calculates and returns the visible rectangle for a given element. Returns a
box describing the visible portion of the nearest scrollable offset ancestor.
Coordinates are given relative to the document.
goog.math.Box
Parameters |
---|
|
Returns |
|
code »goog.style.installStyles ( stylesString, opt_node ) ⇒ (Element|StyleSheet)
Installs the styles string into the window that contains opt_element. If
opt_element is null, the main window is used.
(Element|StyleSheet)
code »goog.style.isElementShown ( el ) ⇒ boolean
Test whether the given element has been shown or hidden via a call to
#setElementShown
.
Note this is strictly a companion method for a call
to #setElementShown
and the same caveats apply; in particular, this
method does not guarantee that the return value will be consistent with
whether or not the element is actually visible.
boolean
#setElementShown
.
Note this is strictly a companion method for a call
to #setElementShown
and the same caveats apply; in particular, this
method does not guarantee that the return value will be consistent with
whether or not the element is actually visible.Parameters |
---|
|
Returns |
|
code »goog.style.isRightToLeft ( el ) ⇒ boolean
Returns true if the element is using right to left (rtl) direction.
boolean
Parameters |
---|
|
Returns |
|
code »goog.style.isUnselectable ( el ) ⇒ boolean
Returns true if the element is set to be unselectable, false otherwise.
Note that on some platforms (e.g. Mozilla), even if an element isn't set
to be unselectable, it will behave as such if any of its ancestors is
unselectable.
boolean
Parameters |
---|
|
Returns |
|
code »goog.style.parseStyleAttribute ( value ) ⇒ !Object
Parses a style attribute value. Converts CSS property names to camel case.
!Object
Parameters |
---|
|
Returns |
|
code »goog.style.scrollIntoContainerView ( element, container, opt_center )Changes the scroll position of container
with the minimum amount so
that the content and the borders of the given element
become visible.
If the element is bigger than the container, its top left corner will be
aligned as close to the container's top left corner as possible.
container
with the minimum amount so
that the content and the borders of the given element
become visible.
If the element is bigger than the container, its top left corner will be
aligned as close to the container's top left corner as possible.code »goog.style.setBorderBoxSize ( element, size )Sets the border box size of an element. This is potentially expensive in IE
if the document is CSS1Compat mode
Parameters |
---|
|
code »goog.style.setBoxSizingSize_ ( element, size, boxSizing )Helper function that sets the box sizing as well as the width and height
Parameters |
---|
|
code »goog.style.setContentBoxSize ( element, size )Sets the content box size of an element. This is potentially expensive in IE
if the document is BackCompat mode.
Parameters |
---|
|
code »goog.style.setElementShown ( el, isShown )Shows or hides an element from the page. Hiding the element is done by
setting the display property to "none", removing the element from the
rendering hierarchy so it takes up no space. To show the element, the default
inherited display property is restored (defined either in stylesheets or by
the browser's default style rules).
Caveat 1: if the inherited display property for the element is set to "none"
by the stylesheets, that is the property that will be restored by a call to
setElementShown(), effectively toggling the display between "none" and
"none".
Caveat 2: if the element display style is set inline (by setting either
element.style.display or a style attribute in the HTML), a call to
setElementShown will clear that setting and defer to the inherited style in
the stylesheet.
Parameters |
---|
|
code »goog.style.setFloat ( el, value )Sets CSS float property on an element.
code »goog.style.setHeight ( element, height )Set the height of an element. Sets the element's style property.
Sets 'display: inline-block' for an element (cross-browser).
Parameters |
---|
|
code »goog.style.setOpacity ( el, alpha )Sets the opacity of a node (x-browser).
code »goog.style.setPageOffset ( el, x, opt_y )Moves an element to the given coordinates relative to the client viewport.
Parameters |
---|
|
code »goog.style.setPosition ( el, arg1, opt_arg2 )Sets the top/left values of an element. If no unit is specified in the
argument then it will add px. The second argument is required if the first
argument is a string or number and is ignored if the first argument
is a coordinate.
code »goog.style.setPreWrap ( el )Sets 'white-space: pre-wrap' for a node (x-browser).
There are as many ways of specifying pre-wrap as there are browsers.
CSS3/IE8: white-space: pre-wrap;
Mozilla: white-space: -moz-pre-wrap;
Opera: white-space: -o-pre-wrap;
IE6/7: white-space: pre; word-wrap: break-word;
Parameters |
---|
|
code »goog.style.setSize ( element, w, opt_h )Sets the width/height values of an element. If an argument is numeric,
or a goog.math.Size is passed, it is assumed to be pixels and will add
'px' after converting it to an integer in string form. (This just sets the
CSS width and height properties so it might set content-box or border-box
size depending on the box model the browser is using.)
code »goog.style.setStyle ( element, style, opt_value )Sets a style value on an element.
This function is not indended to patch issues in the browser's style
handling, but to allow easy programmatic access to setting dash-separated
style properties. An example is setting a batch of properties from a data
object without overwriting old styles. When possible, use native APIs:
elem.style.propertyKey = 'value' or (if obliterating old styles is fine)
elem.style.cssText = 'property1: value1; property2: value2'.
code »goog.style.setStyle_ ( element, value, style )Sets a style value on an element, with parameters swapped to work with
goog.object.forEach()
. Prepends a vendor-specific prefix when
necessary.
goog.object.forEach()
. Prepends a vendor-specific prefix when
necessary.code »goog.style.setStyles ( element, stylesString )Sets the content of a style element. The style element can be any valid
style element. This element will have its content completely replaced by
the new stylesString.
Parameters |
---|
|
code »goog.style.setTransparentBackgroundImage ( el, src )Sets the background of an element to a transparent image in a browser-
independent manner.
This function does not support repeating backgrounds or alternate background
positions to match the behavior of Internet Explorer. It also does not
support sizingMethods other than crop since they cannot be replicated in
browsers other than Internet Explorer.
code »goog.style.setUnselectable ( el, unselectable, opt_noRecurse )Makes the element and its descendants selectable or unselectable. Note
that on some platforms (e.g. Mozilla), even if an element isn't set to
be unselectable, it will behave as such if any of its ancestors is
unselectable.
code »goog.style.setWidth ( element, width )Set the width of an element. Sets the element's style property.
code »goog.style.showElement ( el, display )Deprecated: Use goog.style.setElementShown instead.Shows or hides an element from the page. Hiding the element is done by
setting the display property to "none", removing the element from the
rendering hierarchy so it takes up no space. To show the element, the default
inherited display property is restored (defined either in stylesheets or by
the browser's default style rules.)
Caveat 1: if the inherited display property for the element is set to "none"
by the stylesheets, that is the property that will be restored by a call to
showElement(), effectively toggling the display between "none" and "none".
Caveat 2: if the element display style is set inline (by setting either
element.style.display or a style attribute in the HTML), a call to
showElement will clear that setting and defer to the inherited style in the
stylesheet.
Parameters |
---|
|
code »goog.style.toCamelCase ( selector ) ⇒ string
Deprecated: Use goog.string.toCamelCase instead.Converts a CSS selector in the form style-property to styleProperty.
string
Parameters |
---|
|
Returns |
|
code »goog.style.toSelectorCase ( selector ) ⇒ string
Deprecated: Use goog.string.toSelectorCase instead.Converts a CSS selector in the form styleProperty to style-property.
string
Parameters |
---|
|
Returns |
|
code »goog.style.toStyleAttribute ( obj ) ⇒ string
Reverse of parseStyleAttribute; that is, takes a style object and returns the
corresponding attribute value. Converts camel case property names to proper
CSS selector names.
string
Parameters |
---|
|
Returns |
|
code »goog.style.translateRectForAnotherFrame ( rect, origBase, newBase )Translates the specified rect relative to origBase page, for newBase page.
If origBase and newBase are the same, this function does nothing.
Parameters |
---|
|
code »goog.style.uninstallStyles ( styleSheet )Removes the styles added by #installStyles
.
#installStyles
.Parameters |
---|
|