A read-only view of an element's computed style (getComputedStyle).
Holds the values the library uses to render an element after every style rule is applied, rather than what one rule or the style attribute declares. Get one from dom::getComputedStyle() (or Window::getComputedStyle()).
Reading Values
Every CSS property has a read-only member named like its el.style member (eg, fontSize, or cssFloat for float), and reading one gives you the value as a string. You can also read a property by name:
std::string size = computed.fontSize;
std::string weight = computed["font-weight"];
A read-only view of an element's computed style (getComputedStyle).
Definition ComputedStyle.h:122
std::string getPropertyValue(std::string_view name) const
Get a property's computed value (getPropertyValue).
Definition ComputedStyle.h:189
ComputedStyle getComputedStyle(const Element &element)
Get an element's computed style (getComputedStyle).
Definition ComputedStyle.h:232
Custom properties return the value in effect for the element, so you can set one on a container and read it on any element inside.
Typed Reads
Each member's AsStyleValue() parses its value into a dom::StyleValue, and AsColor() parses it into a Color. A read by name (eg, computed["--gap"]) has both too:
PlaceMinimap(width.value);
if (
Color accent = computed.color.AsColor())
hud_accent = accent;
An RGBA color value in a certain color space (with CSS parsing helpers).
Definition Color.h:69
A numeric CSS value and its unit.
Definition StyleValue.h:147
Lengths come back in pixels (a few properties, such as border-radius, keep a percentage) and times in seconds. A value that isn't a single number (eg, auto or a transform matrix) gives an Invalid StyleValue, and an empty read gives an Empty one. AsColor() takes any CSS color, so it also converts the text of a custom property (eg, hsl(200 80% 50%)). A value that isn't a color gives an invalid Color, and an empty read gives an unset one.
A ComputedStyle is live, so you can keep one and read it again later. Each read returns the value at the time of the read. Once the element's page is gone, every read returns an empty string (see dom::Element).
- Note
- A read first applies any pending style changes. A property that depends on layout (eg, width, margin, top, or transform) also runs a layout pass, so make all your changes first and then read.
- Note
- The members can't be copied out (auto w = computed.width doesn't compile). Read one into a std::string, or call AsStyleValue() or AsColor().
|
| | ComputedStyle () |
| | Create an empty ComputedStyle (every read returns an empty string).
|
| | ComputedStyle (const ComputedStyle &other) |
| | Copy constructor (both read the same element's style).
|
| | ComputedStyle (ComputedStyle &&other) noexcept |
| | Move constructor (other becomes empty).
|
| ComputedStyle & | operator= (ComputedStyle other) noexcept |
| | Assignment (copies or moves).
|
| | ~ComputedStyle () |
| | Destroy this view (the element isn't affected).
|
| std::string | getPropertyValue (std::string_view name) const |
| | Get a property's computed value (getPropertyValue).
|
| template<detail::FixedString Name> |
| detail::StyleText | operator[] (CSSPropertyName< Name >) const |
| | Get a property's computed value using a name checked at compile time (eg, computed[dom::css<"font-size">]).
|
| detail::StyleText | operator[] (std::string_view name) const |
| | Get a property's computed value by name.
|