How to know button's background color in javascript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I have a yellow button.

When I click the button, I want to get the button's color.

I tried this:

<html>



<head>

  <style rel="stylesheet">

    .A {

      background-color: #ffff00

    }

  </style>

  <script>

    function clicked() {

      console.log(document.getElementById("A1").style.backgroundColor);

    }

  </script>

</head>



<body>

  <input type="button" id="A1" class="A" value="1" onclick="clicked()">

</body>



</html>

then I got nothing.

How can I get 'yellow' or '#ffff00'?

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

You are probably looking for getComputedStyle.

– Alexander Nied
Nov 25 '18 at 7:05

1

Possible duplicate of How to get `background-color` property value in Javascript?

– Mohammad
Nov 25 '18 at 7:57

add a comment |

I have a yellow button.

When I click the button, I want to get the button's color.

I tried this:

<html>



<head>

  <style rel="stylesheet">

    .A {

      background-color: #ffff00

    }

  </style>

  <script>

    function clicked() {

      console.log(document.getElementById("A1").style.backgroundColor);

    }

  </script>

</head>



<body>

  <input type="button" id="A1" class="A" value="1" onclick="clicked()">

</body>



</html>

then I got nothing.

How can I get 'yellow' or '#ffff00'?

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

You are probably looking for getComputedStyle.

– Alexander Nied
Nov 25 '18 at 7:05

1

Possible duplicate of How to get `background-color` property value in Javascript?

– Mohammad
Nov 25 '18 at 7:57

add a comment |

I have a yellow button.

When I click the button, I want to get the button's color.

I tried this:

<html>



<head>

  <style rel="stylesheet">

    .A {

      background-color: #ffff00

    }

  </style>

  <script>

    function clicked() {

      console.log(document.getElementById("A1").style.backgroundColor);

    }

  </script>

</head>



<body>

  <input type="button" id="A1" class="A" value="1" onclick="clicked()">

</body>



</html>

then I got nothing.

How can I get 'yellow' or '#ffff00'?

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

I have a yellow button.

When I click the button, I want to get the button's color.

I tried this:

<html>



<head>

  <style rel="stylesheet">

    .A {

      background-color: #ffff00

    }

  </style>

  <script>

    function clicked() {

      console.log(document.getElementById("A1").style.backgroundColor);

    }

  </script>

</head>



<body>

  <input type="button" id="A1" class="A" value="1" onclick="clicked()">

</body>



</html>

then I got nothing.

How can I get 'yellow' or '#ffff00'?

<html>



<head>

  <style rel="stylesheet">

    .A {

      background-color: #ffff00

    }

  </style>

  <script>

    function clicked() {

      console.log(document.getElementById("A1").style.backgroundColor);

    }

  </script>

</head>



<body>

  <input type="button" id="A1" class="A" value="1" onclick="clicked()">

</body>



</html>

<html>



<head>

  <style rel="stylesheet">

    .A {

      background-color: #ffff00

    }

  </style>

  <script>

    function clicked() {

      console.log(document.getElementById("A1").style.backgroundColor);

    }

  </script>

</head>



<body>

  <input type="button" id="A1" class="A" value="1" onclick="clicked()">

</body>



</html>

javascript html

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

edited Nov 25 '18 at 7:17

Nick Parsons

10.6k31029

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

asked Nov 25 '18 at 6:57

Hoseong Jeon

246112

You are probably looking for getComputedStyle.

– Alexander Nied
Nov 25 '18 at 7:05

1

Possible duplicate of How to get `background-color` property value in Javascript?

– Mohammad
Nov 25 '18 at 7:57

add a comment |

You are probably looking for getComputedStyle.

– Alexander Nied
Nov 25 '18 at 7:05

1

Possible duplicate of How to get `background-color` property value in Javascript?

– Mohammad
Nov 25 '18 at 7:57

You are probably looking for getComputedStyle.

– Alexander Nied
Nov 25 '18 at 7:05

Possible duplicate of How to get `background-color` property value in Javascript?

– Mohammad
Nov 25 '18 at 7:57

add a comment |

3 Answers
3

active

oldest

votes

You can try to use getComputedStyle method to get the button style:

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

answered Nov 25 '18 at 7:07

Foo

Wow! Then do you know how to change rgb to string?

– Hoseong Jeon
Nov 25 '18 at 7:09

1

That is a String. stackoverflow.com/questions/57803/…

– connexo
Nov 25 '18 at 7:32

add a comment |

Your CSS

<style rel="stylesheet">

    .A { background-color: #ffff00 }

</style>

You must write this way

<input type="button" id="A1" class="A" value="1" onclick="clicked()">



    <script>

    function clicked() {

    const element = document.getElementById('A1');

    const style = getComputedStyle(element);

        console.log(style.backgroundColor);

    }

</script>

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

add a comment |

You have to use window.getComputedStyle().

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

Then you have to convert the rgb value to hex.

You can try the following way:

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

edited Nov 25 '18 at 12:57

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465354%2fhow-to-know-buttons-background-color-in-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You can try to use getComputedStyle method to get the button style:

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

answered Nov 25 '18 at 7:07

Foo

Wow! Then do you know how to change rgb to string?

– Hoseong Jeon
Nov 25 '18 at 7:09

1

That is a String. stackoverflow.com/questions/57803/…

– connexo
Nov 25 '18 at 7:32

add a comment |

You can try to use getComputedStyle method to get the button style:

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

answered Nov 25 '18 at 7:07

Foo

Wow! Then do you know how to change rgb to string?

– Hoseong Jeon
Nov 25 '18 at 7:09

1

That is a String. stackoverflow.com/questions/57803/…

– connexo
Nov 25 '18 at 7:32

add a comment |

You can try to use getComputedStyle method to get the button style:

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

answered Nov 25 '18 at 7:07

Foo

You can try to use getComputedStyle method to get the button style:

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

function clicked() {

  var button = document.getElementById("A1");

  var style = getComputedStyle(button);

  

  console.log(style['background-color']);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked()">

answered Nov 25 '18 at 7:07

Foo

answered Nov 25 '18 at 7:07

Foo

answered Nov 25 '18 at 7:07

Foo

answered Nov 25 '18 at 7:07

Foo

Wow! Then do you know how to change rgb to string?

– Hoseong Jeon
Nov 25 '18 at 7:09

1

That is a String. stackoverflow.com/questions/57803/…

– connexo
Nov 25 '18 at 7:32

add a comment |

Wow! Then do you know how to change rgb to string?

– Hoseong Jeon
Nov 25 '18 at 7:09

1

That is a String. stackoverflow.com/questions/57803/…

– connexo
Nov 25 '18 at 7:32

Wow! Then do you know how to change rgb to string?

– Hoseong Jeon
Nov 25 '18 at 7:09

That is a String. stackoverflow.com/questions/57803/…

– connexo
Nov 25 '18 at 7:32

add a comment |

Your CSS

<style rel="stylesheet">

    .A { background-color: #ffff00 }

</style>

You must write this way

<input type="button" id="A1" class="A" value="1" onclick="clicked()">



    <script>

    function clicked() {

    const element = document.getElementById('A1');

    const style = getComputedStyle(element);

        console.log(style.backgroundColor);

    }

</script>

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

add a comment |

Your CSS

<style rel="stylesheet">

    .A { background-color: #ffff00 }

</style>

You must write this way

<input type="button" id="A1" class="A" value="1" onclick="clicked()">



    <script>

    function clicked() {

    const element = document.getElementById('A1');

    const style = getComputedStyle(element);

        console.log(style.backgroundColor);

    }

</script>

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

add a comment |

Your CSS

<style rel="stylesheet">

    .A { background-color: #ffff00 }

</style>

You must write this way

<input type="button" id="A1" class="A" value="1" onclick="clicked()">



    <script>

    function clicked() {

    const element = document.getElementById('A1');

    const style = getComputedStyle(element);

        console.log(style.backgroundColor);

    }

</script>

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

Your CSS

<style rel="stylesheet">

    .A { background-color: #ffff00 }

</style>

You must write this way

<input type="button" id="A1" class="A" value="1" onclick="clicked()">



    <script>

    function clicked() {

    const element = document.getElementById('A1');

    const style = getComputedStyle(element);

        console.log(style.backgroundColor);

    }

</script>

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

answered Nov 25 '18 at 8:06

Mohsin Mujawar

766

add a comment |

You have to use window.getComputedStyle().

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

Then you have to convert the rgb value to hex.

You can try the following way:

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

edited Nov 25 '18 at 12:57

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

add a comment |

You have to use window.getComputedStyle().

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

Then you have to convert the rgb value to hex.

You can try the following way:

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

edited Nov 25 '18 at 12:57

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

add a comment |

You have to use window.getComputedStyle().

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

Then you have to convert the rgb value to hex.

You can try the following way:

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

edited Nov 25 '18 at 12:57

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

You have to use window.getComputedStyle().

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

Then you have to convert the rgb value to hex.

You can try the following way:

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

function clicked(el) {

  var bg_color = window.getComputedStyle(el, null).backgroundColor;

  bg_color = bg_color.match(/d+/g);

  console.log(rgbToHex(bg_color));

}

    

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}



function rgbToHex(rgb) {

  return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);

}

.A { background-color: #ffff00 }

<input type="button" id="A1" class="A" value="1" onclick="clicked(this)">

edited Nov 25 '18 at 12:57

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

edited Nov 25 '18 at 12:57

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

answered Nov 25 '18 at 8:43

Mamun

31.3k71932

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk