Change H1 background colour [duplicate]












-2
















This question already has an answer here:




  • Dynamically access object property using variable

    11 answers




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>





javascript







share|improve this question















marked as duplicate by Mike Cluck javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 14 '18 at 21:52


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • 2





    probably because it should be like this style[x]

    – Temani Afif
    Nov 14 '18 at 21:49


















-2
















This question already has an answer here:




  • Dynamically access object property using variable

    11 answers




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>





javascript







share|improve this question















marked as duplicate by Mike Cluck javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 14 '18 at 21:52


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • 2





    probably because it should be like this style[x]

    – Temani Afif
    Nov 14 '18 at 21:49
















-2












-2








-2









This question already has an answer here:




  • Dynamically access object property using variable

    11 answers




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>





javascript







share|improve this question

















This question already has an answer here:




  • Dynamically access object property using variable

    11 answers




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>




This question already has an answer here:




  • Dynamically access object property using variable

    11 answers







javascript




javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 23:36









freedomn-m

12.7k31944




12.7k31944










asked Nov 14 '18 at 21:47









Nasir KhanNasir Khan

61




61




marked as duplicate by Mike Cluck javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 14 '18 at 21:52


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Mike Cluck javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 14 '18 at 21:52


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.










  • 2





    probably because it should be like this style[x]

    – Temani Afif
    Nov 14 '18 at 21:49
















  • 2





    probably because it should be like this style[x]

    – Temani Afif
    Nov 14 '18 at 21:49










2




2





probably because it should be like this style[x]

– Temani Afif
Nov 14 '18 at 21:49







probably because it should be like this style[x]

– Temani Afif
Nov 14 '18 at 21:49














1 Answer
1






active

oldest

votes


















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.






share|improve this answer


























  • 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








  • 1





    @Tarabass I've updated my answer to reflect that - thanks for the suggestion!

    – Ryan
    Nov 14 '18 at 22:12


















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









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.






share|improve this answer


























  • 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








  • 1





    @Tarabass I've updated my answer to reflect that - thanks for the suggestion!

    – Ryan
    Nov 14 '18 at 22:12
















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.






share|improve this answer


























  • 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








  • 1





    @Tarabass I've updated my answer to reflect that - thanks for the suggestion!

    – Ryan
    Nov 14 '18 at 22:12














1












1








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.






share|improve this answer















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.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 14 '18 at 22:12

























answered Nov 14 '18 at 21:50









RyanRyan

3169




3169













  • 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








  • 1





    @Tarabass I've updated my answer to reflect that - thanks for the suggestion!

    – Ryan
    Nov 14 '18 at 22:12



















  • 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








  • 1





    @Tarabass I've updated my answer to reflect that - thanks for the suggestion!

    – Ryan
    Nov 14 '18 at 22:12

















So would h1.style['background'] = "red"; also be valid? (I assume so)

– GrumpyCrouton
Nov 14 '18 at 21:53







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





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







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







@GrumpyCrouton Object Oriented (known notation in most langages)

– Temani Afif
Nov 14 '18 at 21:55






1




1





@Tarabass I've updated my answer to reflect that - thanks for the suggestion!

– Ryan
Nov 14 '18 at 22:12





@Tarabass I've updated my answer to reflect that - thanks for the suggestion!

– Ryan
Nov 14 '18 at 22:12





-

Popular posts from this blog

Florida Star v. B. J. F.

Image
Florida Star v. B. J. F. From Wikipedia, the free encyclopedia Jump to navigation Jump to search United States Supreme Court case Florida Star v. B. J. F. Supreme Court of the United States Argued March 21, 1989 Decided June 21, 1989 Full case name The Florida Star v. B. J. F. Citations 491 U.S. 524 ( more ) 109 S. Ct. 2603; 105 L. Ed. 2d 443; 1989 U.S. LEXIS 3120; 57 U.S.L.W. 4816; 16 Media L. Rep. 1801 Prior history The Florida Star v. B.J.F., 530 So.2d 286 (1988) Supreme Court of Florida; Florida Star v. B.J.F., 499 So.2d 883 (1986) Fla. Dist. Court of Appeals Holding Florida Stat. § 794.03 is unconstitutional to the extent it makes the truthful reporting of information that was a matter of public record unlawful, as it violates the First Amendment. Court membership Chief Justice William Rehnquist Associate Justices William J. Brennan Jr.  · Byron White Thurgood Marshall  · Harry Blac...
Read more

Danny Elfman

Image
Danny Elfman From Wikipedia, the free encyclopedia Jump to navigation Jump to search Danny Elfman Elfman at the 2010 San Diego Comic-Con Born Daniel Robert Elfman ( 1953-05-29 ) May 29, 1953 (age 65) Los Angeles, California, U.S. Spouse(s) Bridget Fonda ( m.  2003) Children 1 Musical career Genres Rock [1] ska [2] new wave film music video game music Occupation(s) Composer, singer, songwriter, record producer Instruments Trombone guitar percussion vocals keyboards [3] Years active 1972–present Associated acts Oingo Boingo James Newton Howard Daniel Robert Elfman (born May 29, 1953) is an American composer, singer, songwriter, and record producer. Elfman first became known for being the lead singer and songwriter for the band Oingo Boingo from 1974 to 1995. He is well known for scoring films and television shows, particularly his frequent collabora...
Read more

Lugert, Oklahoma

Image
Unincorporated community in Oklahoma, United States Lugert, Oklahoma Unincorporated community Foundations from the town of Lugert at the bottom of Lake Altus-Lugert Lugert, Oklahoma Location within the state of Oklahoma Coordinates: 34°53′45″N 99°16′31″W  /  34.89583°N 99.27528°W  / 34.89583; -99.27528 Coordinates: 34°53′45″N 99°16′31″W  /  34.89583°N 99.27528°W  / 34.89583; -99.27528 Country United States State Oklahoma County Kiowa Time zone UTC-6 (Central (CST))  • Summer (DST) UTC-5 (CDT) GNIS feature ID 1100597 Lugert is an unincorporated community in Kiowa County, Oklahoma. [1] The town of Lugert was founded in 1901 on 80 acres (320,000 m 2 ). In the town, there was a general store that housed the Post office and sold dry goods, school supplies, groceries, harnesses, axes and much more. It was named for Frank Lugert, who had moved to the area in 1898. Lugert owned land where the town was sited and also owned the general st...
Read more