Change H1 background colour

Question

I want to change the background colour of h1 tag . But I don't know why this code is not working. Please someone help me.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1 id = "h1">This is h1 tag</h1>
    <script>
        var h1 = document.getElementById('h1');
        var x = 'background';
        h1.style.x = "red";
    </script>
</body>
</html>

probably because it should be like this `style[x]` – Temani Afif Nov 14 '18 at 21:49 — Temani Afif, Nov 14 '18 at 21:49

Ryan · Accepted Answer · 2018-11-14T22:12:19.693

1

In vanilla JavaScript, you do styles is an object, so in order to access the different keys you will need to do so with array notation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1 id = "h1">This is h1 tag</h1>
    <script>
        var h1 = document.getElementById('h1');
        var x = 'background';
        h1.style[x] = "red";
    </script>
</body>
</html>

Changing your call to h1.style[x] sets the property the way you're looking for.

edited Nov 14 '18 at 22:12

answered Nov 14 '18 at 21:50

Ryan

481
2
10

So would `h1.style['background'] = "red";` also be valid? (I assume so) – GrumpyCrouton Nov 14 '18 at 21:53
It absolutely would! – Ryan Nov 14 '18 at 21:53
That's neat. Though I don't understand why `h1.style.background = "red"` would be a more popular choice given that - I guess maybe the fact it uses 3 symbols less. The other notation just seems more verbose to me – GrumpyCrouton Nov 14 '18 at 21:54
@GrumpyCrouton Object Oriented (known notation in most langages) – Temani Afif Nov 14 '18 at 21:55
Thank You Sir :) – Nasir Khan Nov 14 '18 at 21:55
You should consider improving your answer by telling that style is an object and that keys of an object are accessed this way. "variable variables" doesn't mean nothing ;) – Tarabass Nov 14 '18 at 21:56
@GrumpyCrouton `h1.style.background` in this case is more appropriate because there is literally zero dynamic nature to the value of your variable. It's always going to be background. – Taplar Nov 14 '18 at 22:07
1

@Tarabass I've updated my answer to reflect that - thanks for the suggestion! – Ryan Nov 14 '18 at 22:12
@GrumpyCrouton because `h1.style.background = ` doesn't use a variable – freedomn-m Nov 14 '18 at 23:38
@TemaniAfif I know what it is, and understand that. I just think that the bracket syntax _looks_ better, especially when you may have to use it sometimes anyways for variables, and the object syntax doesn't support this. I understand it's purpose, was just thinking out loud I guess. – GrumpyCrouton Nov 15 '18 at 13:42
@Taplar So it's best to use the object syntax if it isn't dynamic? Idk, it just seems weird to sometimes use one way to do this action and sometimes use a different way, when the way that supports using variables/not use variables works in both cases. Seems more Verbose to me – GrumpyCrouton Nov 15 '18 at 13:43
@freedomn-m Yes, but neither does `h1.style['background']`, but it _can_ – GrumpyCrouton Nov 15 '18 at 13:44
@GrumpyCrouton no, but `h1.style[x]` does... I didn't add that to my comment as that was how it was asked in the question. Just because the question is worded such at `x` is a constant and doesn't change - how `x` is set wasn't the relevant part of the question, only that `x` was a variable. – freedomn-m Nov 15 '18 at 14:45
@freedomn-m That's why I said it _can_. My point is that the bracket syntax works with or without a variable, but the object oriented syntax does not. – GrumpyCrouton Nov 15 '18 at 14:57
@GrumpyCrouton Not everything should always be *one way*. That's very inflexible logic. The point is the variable is unnecessary in the case that it can only be a single property, and adding the variable does not improve clarity or add any benefit to the logic, other than forcing the style to a single way. It also takes up more memory as you have an extra variable. Very *very* negligible memory usage, but still, more usage than is needed. – Taplar Nov 15 '18 at 15:23
@Taplar I didn't say anything about an extra variable, and I'm not arguing that there should only be one way to do things. My point is that it's better to have uniform code, if you _never_ need to use a variable to select a property, I don't doubt that it would be best to use the object oriented way every time, however, if you have to use even 1 variable, in my opinion it would look better to use the same selector throughout your code. – GrumpyCrouton Nov 15 '18 at 15:28
Which is an opinion on coding style, which is fine. Just so long as you are aware it's only a coding style and there isn't a programatic benefit from doing it. And, imho, it's a coding style that the majority of developers would see and question why you are doing it. @GrumpyCrouton – Taplar Nov 15 '18 at 16:52
@Taplar Yeah I know there wouldn't be any programmatic benefit. It just seems weird to me to use 2 different styles throughout your code when one of those styles supports both things you are trying to do, and the other style does not. – GrumpyCrouton Nov 15 '18 at 17:22
Perhaps I'm side tracking the argument. My main concern with this was the variable, given a single value. But you could still `h1.style['background']` and keep the style without introducting a variable. Which from one of your previous comments towards freedomn-m you mention doing that. So perhaps I'm misunderstanding that you were advocating for the usage of the variable, rather than just the usage of the access pattern? @GrumpyCrouton – Taplar Nov 15 '18 at 17:29
@Taplar Yes! Sorry, I may not have been clear. I'm specifically talking about the pattern, not the variable. It doesn't make sense to me to use multiple "patterns" in the same code, seems like that would look messy to me. – GrumpyCrouton Nov 15 '18 at 17:30
Sweet! Heh, it just occurred to me we may have been crossing wires. Yeah, I (personally) don't have any issue with that style preference. – Taplar Nov 15 '18 at 17:31

Change H1 background colour

1 Answers1