How to set inline CSS of element to default using javascript?

Question

I have simple function in which I change the default styling of text when a checkbox is checked, and change the styling back to default when checkbox gets unchecked.

The terms.style = ""; should reset the style back to default, but for some reasons it doesn't, and I have absolutely no idea why. I know that the else scope is performed when checkbox gets unchecked, as I have tested it with manually entering different style.

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

element.style is a read-only Object. Either use element.setAttribute('style', 'color: black; font-weight: normal') or use element.style.cssText = 'color: black; font-weight: normal'. — connexo
– connexo, Commented Dec 7, 2018 at 15:08
Has your element some CSS in style attribute that you want to back to default? — Mohammad
– Mohammad, Commented Dec 7, 2018 at 15:18
Yes, the default style is color: red and font-weight: bold. I know I could insert these styles manually in js, but then it would be wrong from design perspective. — Mortem
– Mortem, Commented Dec 7, 2018 at 15:20

Mohammad · Accepted Answer · 2018-12-07 15:24:02Z

2

You can get inline CSS in style attribute of element using getAttribute() and store it in variable and on check/uncheck of checkbox insert and remove it from style attribute

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>

answered Dec 7, 2018 at 15:24

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vrintle Over a year ago

Why not just terms.style = style; in else statement ?

Dmitriy · Accepted Answer · 2018-12-07 15:07:17Z

1

According to MDN:

Styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;")

Correct way would be:

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 = "";
    }
});

answered Dec 7, 2018 at 15:07

Dmitriy

1,2411 gold badge12 silver badges29 bronze badges

1 Comment

Mortem Over a year ago

Hi Dmitriy. I changed the code to yours, but sadly the style still doesn't reset.

Collectives™ on Stack Overflow

How to set inline CSS of element to default using javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related