Tips on using javascript to reset an element's inline CSS to its initial default styling?

Question

Tips on using javascript to reset an element's inline CSS to its initial default styling?

I have a basic function that alters the default text styling when a checkbox is checked, and restores it to its original state when the checkbox is unchecked.

Despite my efforts, the terms.style = ""; line does not reset the style as expected. I am perplexed by this issue and cannot figure out why. I have confirmed that the else statement executes correctly when the checkbox is unchecked, as I manually tried changing the styles.

const form = document.getElementById('form');
const checkBox = form.querySelector('input[name=termsCheckBox]');

checkBox.addEventListener('click', function(){
    const terms = document.getElementById('termsText');
    if (checkBox.checked){
        terms.style = "color: black; font-weight: normal";
    } else {
        terms.style = "";
    }
});//end of function

javascript css inline-styles

Answer 1

Answer №1

To apply inline CSS to an element's `style` attribute, you can use the `getAttribute()` method to retrieve the current style, store it in a variable, and then add or remove it based on the checkbox state.

var checkBox = document.querySelector('#form input[name=termsCheckBox]'),
    terms = document.getElementById('termsText'),
    style = terms.getAttribute('style');

checkBox.addEventListener('click', function(){
  if (checkBox.checked)
    terms.style.cssText = "color:black; font-weight:normal";
  else
    terms.style.cssText = style;
});

<form id="form">
  <input type="checkbox" name="termsCheckBox">
  <textarea id="termsText" style="color:red; font-weight:bold">termsText</textarea>
</form>

Answer 2

To apply inline CSS to an element's `style` attribute, you can use the `getAttribute()` method to retrieve the current style, store it in a variable, and then add or remove it based on the checkbox state.

var checkBox = document.querySelector('#form input[name=termsCheckBox]'),
    terms = document.getElementById('termsText'),
    style = terms.getAttribute('style');

checkBox.addEventListener('click', function(){
  if (checkBox.checked)
    terms.style.cssText = "color:black; font-weight:normal";
  else
    terms.style.cssText = style;
});

<form id="form">
  <input type="checkbox" name="termsCheckBox">
  <textarea id="termsText" style="color:red; font-weight:bold">termsText</textarea>
</form>

Answer 3

Answer №2

As outlined on MDN:

It is advised not to set styles by directly assigning a string to the style property (such as elt.style = "color: blue;")

The proper way to do this is:

checkBox.addEventListener('click', function(){
    const terms = document.getElementById('termsText');

    if(checkBox.checked){
        terms.style.color = "black";
        terms.style.fontWeight = "normal";
    }else{
        terms.style.color = "";
        terms.style.fontWeight = "";
    }
});

Answer 4

As outlined on MDN:

It is advised not to set styles by directly assigning a string to the style property (such as elt.style = "color: blue;")

The proper way to do this is:

checkBox.addEventListener('click', function(){
    const terms = document.getElementById('termsText');

    if(checkBox.checked){
        terms.style.color = "black";
        terms.style.fontWeight = "normal";
    }else{
        terms.style.color = "";
        terms.style.fontWeight = "";
    }
});

Tips on using javascript to reset an element's inline CSS to its initial default styling?

Answer №1

Answer №2

Similar questions

HTMX allows for multiple events to be triggered on a single element, each event initiating a unique request

Using AJAX and jQuery, the result is retrieved and inserted into a <div> element

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

The Else clause is executing twice in the jQuery code

The JavaScript function I coded is capable of executing on its own without needing

Escape key does not close the modal dialogue box

Issues with Angular Component not detecting changes in @Input array

Is it possible to alter the location of a button through a click event

The Shopify Pixel Extension has encountered an issue - error code 1

Comparing inline-block and block display options for displaying images

What is the process for creating text within a rectangle using canvas, pixi.js, or three.js?

What is the method for configuring Google API's free Translate service to provide results in JSON format?

The continuous firing of the postback event of the Asp.Net Button is

Searching across multiple attributes in Jquery UI Autocomplete: A comprehensive guide

The image appears to be overlapping within the navigation bar

I am encountering an issue with my authentication system where it is returning

Vue Functional Calendar - Easily manipulate selectedDates with the power of v-model

Error: ChunkLoadError - Unable to load chunk for node_modules_next_dist_client_dev_noop_js

Using localStorage in Next.js, Redux, and TypeScript may lead to errors as it is not defined

AngularJS- issue with button visibility on 'toolbar' widget