Dominator.js | CSS Property (Nesting)

Using the 'css' Property with Dominator Nesting

The 'css' property in Dominator.js is used to directly set CSS styles for elements. When used with nesting, it allows you to style elements as they are created, giving you flexibility and reducing the need for extra steps.

Example Usage:

1. Create a div element, set background color, and append it to .example-output

                    D$({element: 'div', text: 'Styled div', css: {backgroundColor: 'lightblue', padding: '20px'}, appendTo: '.example-output'});
                

This code creates a <div> element with text "Styled div", sets a light blue background color and padding, and appends it to the .example-output element.

2. Create a paragraph element, set font color, and append it to .example-output

                    D$({element: 'p', text: 'This is a styled paragraph.', css: {color: 'red', fontSize: '18px'}, appendTo: '.example-output'});
                

This code creates a <p> element with the text "This is a styled paragraph", sets the font color to red and font size to 18px, and appends it to the .example-output element.

The 'css' property allows for easy styling by accepting an object where the keys are the CSS properties and the values are the styles you wish to apply. When used with nesting, the element is both created and styled in one step.