getComputedRegionStyle

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

getComputedRegionStyle()

This article is Ready to Use.


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(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().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