I'm using message.innerText for string output in google extension.
var text="hello world";
message.innerText = text;
Question is how to make bg color and text color different? Thank you!
I'm using message.innerText for string output in google extension.
var text="hello world";
message.innerText = text;
Question is how to make bg color and text color different? Thank you!
Share Improve this question asked Aug 6, 2017 at 18:53 Jessica RayJessica Ray 652 silver badges5 bronze badges3 Answers
Reset to default 1You should review the style property of DOM nodes. That said, you are looking for backgroundColor and color:
message.style.backgroundColor = 'some valid color value';
message.style.color = 'some valid color value';
Use this code:
var message = document.getElementById("#message");
var text = "hello world";
message.innerText = text;
message.style.backgroundColor = "#ff0000";
message.style.color = "#ffffff";
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#message {
width: 300px;
height: 300px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">Change Style</button>
<br /><br />
<div id="message">
Hello
</div>
<script>
function myFunction() {
var message = document.getElementById("message");
var text = "hello world";
message.innerText = text;
message.style.backgroundColor = "#ff0000";
message.style.color = "#ffffff";
}
</script>
</body>
</html>you can change the background color and text color by using the style properties of elements. see below snippet.
var text="hello world";
var message = document.getElementById('message');
message.innerText = text;
message.style.backgroundColor = "RED";;
message.style.color = "white";<span id="message"></span>