getRegionsByContent()

Summary

Returns the static sequence of regions that contain at least part of the supplied target content element.

Method of apis/css-regions/NamedFlowapis/css-regions/NamedFlow

Syntax

var regions = flow.getRegionsByContent(element);

Parameters

element

Data-type

DOM Node

Return Value

Returns an object of type functionfunction

Returns the static sequence of regions that contain at least part of the supplied target content element. The regions are returned in document order.

Examples

Checks if the last paragraph in a flow splits across more than one region

// get flow:
var flow = document.getNamedFlows().namedItem('main');
// get all top-level flow-into elements that contribute to flow:
var elements = flow.getContent();
// get last element:
var lastElement = elements[elements.length-1];
// from within last element, get last paragraph;
var lastPara = lastElement.querySelector('p:last-of-type');
// get regions in which last paragraph displays:
var regions = flow.getRegionsByContent(lastPara);
// check if last paragraph splits across regions:
if (regions.length > 1) {
    // do something?
}

Related specifications

CSS Regions Module Level 1

W3C Working Draft

See also

Related articles

Regions

• CSS Regions API

• CSSRegionStyleRule

• NamedFlow

• firstEmptyRegionIndex

• getContent()

• getRegions()

• getRegionsByContent()

• name

• overset

• regionfragmentchange

• regionoversetchange

• NamedFlowCollection

• namedItem()

• Region

• getComputedRegionStyle()

• getRegionFlowRanges()

• regionOverset

• @region

• content fragments

• named flows

• overset content

• regions

• region chains

• break-after

• break-before

• break-inside

• flow-from

• flow-into

External resources

• W3C editor’s draft: CSS Regions Module Level 3
• Adobe Web Standards: CSS Regions
• Adobe Developer’s Network: CSS3 Regions: Rich page layout with HTML and CSS3
• Sample pages