Summary of “Dynamic element styles”

The style Property

Use the style property to manage an element’s styles. After style, add a dot followed by the name of the CSS property you want to change. Assign a new value to that property to change the element’s appearance.

let element = document.querySelector('p');

// Set the paragraph’s text color to green
element.style.color = 'green';

Styles defined using the style property work in the same way as styles specified in the element’s styleattribute. They have a higher priority than CSS rules from a stylesheet.

When accessing CSS properties with dot notation in JavaScript, replace hyphens with camelCase: capitalize each word after the first. For example:

If we obtain data from the input field, then we use concatenation in order to assign the units of measurement:

longread.style.fontSize = sizeSetting.value + 'px';

// Suppose that the user entered the number 16
longread.style.fontSize = 16 + 'px'; // Result: '16px'

To find out which styles are already applied to an element, use the window.getComputedStyle method.

The onchange and oninput Handlers

To track changes to an input field, you can use the onchange and oninput handlers. The difference between them is as follows:

• onchange runs when the user commits a changed field value. For example, when they release the slider after moving it, or when they edit a text field and then move focus away from it.
• oninput runs whenever the user changes the field’s value, without waiting for them to finish. For example, it runs as the user moves the slider. It also runs when the user types, pastes, or deletes text, even while they continue editing.

When we change the size of elements, the browser must redraw the page. This is a resource-intensive operation, and it should be performed as rarely as possible. Use the oninput handler carefully.

The type Property

A special password-type field is used to enter the password. One special property of this field is that the entered text is masked. Typically browsers use asterisks or circles to mask the text.

To show the password, convert the password input field into a text input field. To do this, change its type to text. The type property in JavaScript is used to assign types. To change the input field type, you need to write a new value to the type property.

let input = document.querySelector('input');

// Change the input field’s type to text
input.type = 'text';

Checkboxes and the checked Property

A checkbox is an input field that can have one of two states: on or off. Usually the checkmark indicates the state of the checkbox in browsers: if the checkbox is ticked, then it is checked. To track this event from the script, use the onchange event handler.

To check the state of the checkbox, use the checked property. This property has the boolean value true if the checkbox is checked and false if it is not.

// Check whether the checkbox is checked
  if (showPassword.checked) {
    // The instructions are executed if the checkbox is checked
  } else {
    // The instructions are executed if the checkbox is unchecked
  }

The Comparison and Multiplication Operators

JavaScript has several comparison operators. These operators work the same way as in mathematics:

1 > 2;  // "Greater than" operator
1 < 2;  // "Less than" operator
1 >= 2; // "Greater than or equal to" operator
1 <= 2; // "Less than or equal to" operator

The “greater than or equal to” and “less than or equal to” operators are indicated using two characters: an angle bracket and an equal sign.

Multiplication is indicated using an asterisk in JavaScript:

console.log(3 * 10); // Outputs: 30

The else if Statement

The else if statement allows us to add an alternative branch with a condition to a conditional statement. Indicate the condition in parentheses after else if, and indicate the instructions that should be executed in curly braces if this condition returns true.

if (condition-1) {
  // The instructions are executed if condition-1 is true
} else if (condition-2) {
  // The instructions are executed if condition-1 is false but condition-2 is true
} else {
  // The instructions are executed if both conditions are false
}

JavaScript executes instructions from top to bottom. First it will check condition-1. If it is true, the instructions from the first branch are executed. If condition-1 is false, JavaScript checks condition-2. If it is true, the instructions from the second branch are executed. If both conditions are false, then the instructions from the else branch are executed.

You can have any number of else if branches in your conditional statement. But the more you have of them, the more confusing the code is.