Summary of “Dynamic element styles”

The style Property

You can use the style property to manage element styles. After style (after the dot) indicate the CSS property that needs to be changed. In order to change the style of an element, the specified property needs to be assigned a new value.

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

// Assign green text for the paragraph
element.style.color = 'green';

Styles that are defined using the style property work in the same as if they were specified in the markup in the styleattribute of the element itself. They have a higher priority than CSS rules from a stylesheet.

You cannot use hyphens in property names in JavaScript. Instead, you should use CamelCase to designate the boundaries of words. 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 the input field, you can use the onchange and oninput handlers. The different between them is as follows:

• onchange is triggered if the value of the input field has changed and the user has finished entering input. For example, if the user moved the slider and released it, or they entered something a text field then moved the cursor away from it.
• oninput is triggered for every change of value regardless of whether the user finished entering text or not. For example, it is triggered for every change of position of the slider, even if the user continues to move it. Similarly, it is triggered by every new character that is entered in the text field, even if the user continues to enter text.

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, you need to covert 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');

// Create the text input field
input.type = 'text';

The checked Checkbox and 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.