• 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.
    • 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 !?

cbreemer

cbreemer

King Coder
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.
 
Sort by date Sort by votes
Johna

Johna

Full-Stack Web Developer
Staff Team
Guardian
It's probably because JavaScript typically uses camel casing.

You could use jQuery. It uses the CSS names:
JavaScript: 
$(element).css("background-color", "red");
 
Upvote 0 Downvote
Antero360

Antero360

King Coder
Staff Team
Security Analyst
cbreemer said:
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.
Click to expand...
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');
 
Upvote 0 Downvote
cbreemer

cbreemer

King Coder
Johna said:
It's probably because JavaScript typically uses camel casing.
Click to expand...
That does not explain the hyphen 😀

Johna said:
You could use jQuery. It uses the CSS names:
JavaScript: 
$(element).css("background-color", "red");
Click to expand...
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.
 
Upvote 0 Downvote
cbreemer

cbreemer

King Coder
Antero360 said:
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');
Click to expand...
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.
 
Upvote 0 Downvote
Top