Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Style attribute names are annoying !?

  • Thread starter Deleted member 2829
  • Start date
D

Deleted member 2829

Guest
One of the things that keep tripping me up and annoying me is that style attribute names seem to be inconsistent between the DOM and CSS.

For example to specify a red background in the CSS I need
CSS:
    background-color    : red;
but if I want to do that dynamically in JS I need to do
JavaScript:
element.backgroundColor = 'red';

That difference in spelling ( background-color vs. backgroundColor ) is driving me nuts. Would there be a good reason for this or is it just bad design aimed at confusing programmers ? Or is there something I'm not getting here ? Would love to hear some thoughts on this.
 
It's probably because JavaScript typically uses camel casing.

You could use jQuery. It uses the CSS names:
JavaScript:
$(element).css("background-color", "red");
 
One of the things that keep tripping me up and annoying me is that style attribute names seem to be inconsistent between the DOM and CSS.

For example to specify a red background in the CSS I need
CSS:
    background-color    : red;
but if I want to do that dynamically in JS I need to do
JavaScript:
element.backgroundColor = 'red';

That difference in spelling ( background-color vs. backgroundColor ) is driving me nuts. Would there be a good reason for this or is it just bad design aimed at confusing programmers ? Or is there something I'm not getting here ? Would love to hear some thoughts on this.
you could also just use pure vanilla js lol
JavaScript:
document.querySelector(element).setAttribute('style', 'background-color: red;');

or if inline is not what you need, you can always create a class and just add the class to the element
CSS:
.blood-red {
    background-color: red;
}

JavaScript:
document.querySelector(element).classList.add('blood-red');
 
It's probably because JavaScript typically uses camel casing.
That does not explain the hyphen 😀

You could use jQuery. It uses the CSS names:
JavaScript:
$(element).css("background-color", "red");
Yes I noticed jQuery has this possibility. Although I don't like it much, this is a small point in its favor. This particular pet annoyance does not justify adopting jQuery for me though.
 
you could also just use pure vanilla js lol
JavaScript:
document.querySelector(element).setAttribute('style', 'background-color: red;');

or if inline is not what you need, you can always create a class and just add the class to the element
CSS:
.blood-red {
    background-color: red;
}

JavaScript:
document.querySelector(element).classList.add('blood-red');
Thanks, yes there's always more ways to skin a cat. Still, this apparently willful inconsistency just annoys me. I somehow can't imagine I am the only one.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom