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

Error while running script in elastic search , gateway timeout

Image
0 while running script in elastic search, I got 504 Gateway timeout error. { "query": { "bool": { "filter": { "script": { "script": " doc['creted_date'].date.getMonthOfYear() == 12 " } } } }, "aggs": { "test": { "date_histogram": { "field": "creted_date", "interval": "month", "format": "MMM" }, "aggs": { "cost": { "sum": { "field": "cost" } } }
Read more

Adding quotations to stringified JSON object values

Image
0 My stringified object data doesn't include quotation marks around object values, which errors when attempting JSON.parse() : '{ "affiliation": CORPORATE, "userId": 75c35d1c-5d12-4485-8fa8-b2f1551a3e6e }' I need the string to be: '{ "affiliation": "CORPORATE", "userId": "75c35d1c-5d12-4485-8fa8-b2f1551a3e6e" }' I'm using this regex to add quotes to the object keys: var newStr = str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '); For instance: '{ affiliation: CORPORATE }' to '{ "affiliation": CORPORATE }' There are only string values in my data, so I don't need to check value types. How can I alter my regex expression to add quotations to
Read more