How to Use Asynchronous Functions in JavaScript
JavaScript is a synchronous language, yet sometimes asynchronous behavior is required. For example, you may need to use an asynchronous function while waiting for data to
NOTE: The background of an element includes its padding and border, but not its margin. You will need to take this into account when developing your page design.
CSS properties are easily changed in code (to learn more about modifying CSS with JavaScript, check out this link). In this article we’ll walk through how to manipulate the background-color CSS property using JavaScript.
Two elements are required to perform the change:
- An event to trigger the change. This can be a DOM event, a JavaScript event (e.g. events generated using setTimeout()), or using CSS pseudo-classes.
- A function that is responsible for making the change (with the exception of using CSS pseudo-classes).
Take the following sample JavaScript and HTML, which create a <p> element containing a background color when clicked.
JavaScript
function changeBgc(el) { el.style.backgroundColor = 'yellow'; }
HTML
<p onclick="changeBgc(this)"> Click to change background color </p>
In this code, the triggering event is onclick (defined as a property on the <p> element). When the click handler is called, the event will be routed to the changeBgc() method we describe above..
The changeBgc() function receives the this object as a parameter. The this object contains the HTML element itself. We can access the styles for this element with the .style property, which gives us access to the .backgroundColor CSS property. The code uses this property to assign the value “yellow” to the element, changing its background color to yellow.
Note: Using the style property will add inline styling to the element. Inline CSS is the most specific level of CSS that can be applied to an object, applying to an individual element itself. It thus overrides most other CSS declarations for an element.
This approach centers on using element properties in JavaScript to modify the inline style for an element. There are two other ways that JavaScript can use to change a CSS property:
- Setting the style attribute for the element directly by using the setAttribute() method.
- Adding or removing a class from an element using the classList property and its associated methods (i.e. the add() method, among others).
Related Articles:
JavaScript – How to Use setAttribute
JavaScript – How to Change CSS
JavaScript – How to Set an HTML Element’s Class Using JavaScript
JavaScript is a synchronous language, yet sometimes asynchronous behavior is required. For example, you may need to use an asynchronous function while waiting for data to
The replace() method operates on a String, returning a new string with the corresponding changes. Note: JavaScript strings are immutable. Syntax The syntax of the replace()
Loops enable the repeated execution of a function or a block of code. There are many types of loops in JavaScript that you can use to