getComputedRegionStyle

< apis‎ | css-regions‎ | Region
Jump to: navigation, search

getComputedRegionStyle()

W3C Working 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(see parameter list);

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.




Compatibility

There is no data available for topic "webapi", feature "getComputedRegionStyle". If you think that there should be data available, consider opening an issue.

Examples

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

JavaScript

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

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft 28 May 2013

See also

Related articles

Regions















  • getComputedRegionStyle()

















External resources