Changing Element Styles with Js

-

 Every HTML element in the Javascript DOM contains a Javascript object property called style. The style object contains many properties that correspond to CSS properties, so you can set properties on the style object to change element CSS styles directly.

The style object property names are consistent with basic CSS properties. For example, the Javascript CSS property to set an element’s foreground color is exactly the same as its usual CSS property:

color: black;                       // CSS

document.body.style.color = "black" // Javascript CSS

All CSS properties are accessible directly through the style object; there is no need to wade through sub-objects to find the CSS property you want to change. Since there are no sub-objects some CSS property names get a little long in Javascript, like backgroundColor, but the simplicity of accessing everything directly from the style object usually outweighs the occasional cumbersome property length.


In the following example, the backgroundColor property in the first line is used in camel case as a property of the style object. The second line attempts to create a background color property incorrectly, with color as a sub-property of the style property “background”. There is no camel case in the second line, but developers would be required to remember a complex property hierarchy if Javascript CSS specified all properties this way.

document.body.style.backgroundColor = "black";   // correct

document.body.style.background.color = "black";  // wrong

Since the Javascript standard and the CSS standard are managed by different organizations, there is always some lag between the most recent additions to the CSS standard and the ability to change those properties with Javascript CSS. The lag has lessened in recent years because the Javascript standard is now updated yearly.

Javascript CSS Versus External CSS

Javascript CSS looks slightly different from external CSS because Javascript has different linguistic conventions than pure CSS. Many properties in external CSS files include hyphens in their names, and Javascript does not allow hyphens in its property names.

Javascript CSS removes hyphens from CSS property names and identifies words using camel case. Using camel case means that CSS properties that are only a single word look identical in external CSS files compared to Javascript CSS, while those properties with multiple words look different.

// The "margin" property in external CSS and Javascript CSS.

margin: 0px;

document.body.style.margin = "0px";

// The "background color" property in external CSS and Javascript CSS.

background-color: white;

document.body.style.backgroundColor = "white";

Changing Javascript CSS with Events

Changes to Javascript CSS do not happen on their own; they happen in response to the user interacting with a web page. Every interaction a user makes with a web page is called an “event,” and Javascript reacts to these events with structures called event listeners.

A common place to find Javascript CSS is in an event listener that activates when a button is clicked, opening a collapsed section of a web page. In this example, an event listener is added to a button, and the listener checks the display status of the HTML element with ID “myDiv” when the button is clicked. If the “myDiv” element is hidden, it’s set to display after a button click, and vice versa.

let button = document.createElement('button');

button.addEventListener('click', event => {

    let myDiv = document.getElementById("myDiv");

    if (myDiv.style.display === "none") {

        document.getElementById("myDiv").style.display = "block";

    } else {

        document.getElementById("myDiv").style.display = "none";

    }

});

Choosing to Use Javascript CSS

When choosing whether to use Javascript CSS, maintenance is a major concern. It can be more difficult to maintain Javascript CSS than to maintain external CSS files because you need to know Javascript and CSS simultaneously. Unless you are certain that anyone who reads your code will understand Javascript and CSS, it may be best to keep your Javascript and CSS separate from each other.

Since Javascript is not always up-to-date with the newest CSS features, it is best to use external CSS when relying on the newest CSS. Well-established CSS properties are reliable in Javascript, but anything bleeding-edge won’t be available in the Javascript standard immediately.



Comments

Post a Comment

Popular posts from this blog

Arrays JavaScript Objects JavaScript

-
Image
  Arrays The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations. Description In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics: JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.) JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes. JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1. JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with...
Read more

ADVANCE FUNCTIONS JS

-
Image
 A function has access to the variable environment (VE) of excecution context it was created  Closure : VE attached to the function, exactly as it was at the time and place the function was created  A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. A closure is the closed-over variable environment of the execution context in which a function wascreated, even after that execution context is gone. A closure gives a function access to all the variables of its parent function , even after that parent function has returned. The function keeps a reference to its outer scope, which preserves the scope chain throught time. A closure makes sure that a function doesn't loose connection to variable that...
Read more