This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

getComputedRegionStyle()

Summary

Returns styles calculated for an element as it appears within a region, including styles from @region rules applied to ranges within the element.

Method of apis/css-regions/Regionapis/css-regions/Region

Syntax

var propValue = region.getComputedRegionStyle(element, pseudoElementName);

Parameters

element

Data-type
DOM Node

The element that contains the desired style settings, regardless of whether it currently appears within the region.

pseudoElementName

Data-type
String

(Optional)

The name of a CSS pseudo-element (such as ::before or ::after) or a null value. Optional in WebKit-based browsers.

Return Value

Returns an object of type CSSStyleDeclarationCSSStyleDeclaration

Returns styles calculated for an element as it appears within a region, including styles from @region rules applied to ranges within the element.

Examples

Check if the formatting of an element’s property varies within a region chain

var flow = document.getNamedFlows().namedItem('sidebar');
var regions = flow.getRegions();
var contents = flow.getContent();

// get a sample of pull-quote content
var pull = contents[0].querySelector('aside.pullquote')

// are there discrepancies in how the pull-quote's text
// would be colored throughout the region chain?
varies = regionsVaryCSS(regions, pull, 'color');

function regionsVaryCSS(regs, elem, prop) {
    var values = {};
    var value, style;
    var count = 0;
    for (var i = 0; i < regs.length; i++) {
        value = regs[i].getComputedRegionStyle(elem).getPropertyValue(prop);
        if (! values[value]) values[value] = 0;
        values[value]++;
    }
    for (key in values) if (values.hasOwnProperty(key)) count++;
    return count;
}

Usage

 Behaves the same as getComputedStyle(), but incorporates CSS formatting from @region rules that may apply to individual regions.

Related specifications

CSS Regions Module Level 1
W3C Working Draft 28 May 2013

See also

Related articles

Regions

External resources