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/Region apis/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 &lt; 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