/ 
Mojo-DOM-Role-Style-0.005
/ Mojo::DOM::Role::Style

NAME

Mojo::DOM::Role::Style - Manage inline CSS styles on Mojo::DOM elements

SYNOPSIS

use Mojo::DOM;

my $dom = Mojo::DOM->new('<div style="color:red;font-size:12pt">hello</div>')
  ->with_roles('+Style');

# Get the full style - stringifies to the CSS string
my $style = $dom->at('div')->style;
say $style;                    # "color:red;font-size:12pt"
say $style->{'color'};         # "red"

# Get a single property
my $color = $dom->at('div')->style('color');

# Replace with a raw CSS string
$dom->at('div')->style('color:blue;font-size:14pt');

# Replace with a flat list
$dom->at('div')->style(color => 'blue', 'font-size' => '14pt');

# Merge into the existing style
$dom->at('div')->style({'font-weight' => 'bold'});

# Remove the style attribute entirely
$dom->at('div')->style(undef);

DESCRIPTION

Mojo::DOM::Role::Style is a role that adds a convenience method for reading and manipulating the style attribute of Mojo::DOM elements.

RETURN VALUE

Getter calls with no arguments return a Mojo::DOM::Role::Style::Value object. This object stringifies to the CSS attribute string, and can be dereferenced as a hash to access individual properties.

my $style = $dom->at('div')->style;
say $style;                # "color:red;font-size:12pt"
say $style->{'color'};     # "red"

Single-property getter calls return a plain string. All setter calls return the element itself for chaining.

METHODS

Mojo::DOM::Role::Style implements the following methods.

style

my $style = $dom->at('div')->style;
my $val   = $dom->at('div')->style('color');
$dom      = $dom->at('div')->style('color:red;font-size:12pt');
$dom      = $dom->at('div')->style(color => 'red', 'font-size' => '12pt');
$dom      = $dom->at('div')->style({'font-weight' => 'bold'});
$dom      = $dom->at('div')->style(undef);

Get or set the inline style of this element.

With no arguments, returns a Mojo::DOM::Role::Style::Value representing the current style.

# "red"
my $style = $dom->at('p')->style;
say $style->{'color'};

With a single string argument that is a property name, returns the value of that CSS property, or undef if it is not set.

# "red"
$dom->at('p')->style('color');

With a single string argument that is a raw CSS declaration string, replaces the entire inline style and returns the element for chaining.

# <p style="color:red;font-size:12pt">hi</p>
$dom->at('p')->style('color:red;font-size:12pt');

With an even-length flat list, replaces the entire inline style with the given property-value pairs. Key order is preserved as supplied. Returns the element for chaining.

# <p style="color:blue;font-size:14pt">hi</p>
$dom->at('p')->style(color => 'blue', 'font-size' => '14pt');

With a hash reference, merges the given properties into the existing style, adding new properties and overwriting existing ones. Returns the element for chaining.

# <p style="color:red;font-weight:bold">hi</p>
$dom->at('p')->style({'font-weight' => 'bold'});

With undef, removes the style attribute entirely and returns the element for chaining.

# <p>hi</p>
$dom->at('p')->style(undef)->attr('id', 'intro');

SEE ALSO

Mojo::DOM, Mojolicious, Mojolicious::Guides, https://mojolicious.org.

COPYRIGHT AND LICENSE

Copyright (c) 2021 Simone Cesano.

This is free software, you may use it and distribute it under the same terms as Perl itself.

AUTHOR

Simone Cesano