getComputedRegionStyle

This page has been flagged with the following issues:

High-level issues:

Needs Review

W3C Editor's Draft

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

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 CSSStyleDeclaration.

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

JavaScript

var flow = document.getNamedFlows()['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

Specification	Status	Related Changes
CSS Regions Module Level 3	W3C Editor's Draft

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	20 -webkit	Unsupported	Unsupported	Unsupported	534 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported

Search

getComputedRegionStyle

How to Use

getComputedRegionStyle

Summary

Syntax

Parameters

element

pseudoElementName

Return Value

Examples

Usage

Related specifications

Compatibility

Desktop

Mobile

See also

Related articles

Regions

External resources