CODEWITHSUNDEEP
javascripthtmlcss
Rahul
Rahul

Reputation: 25

How can i add styles to newElement.Innerhtml provided below

I want to add the text styles into the newElement.InnerHTML part into the below javascript. The 5th line into the javascript says "You can download the file in 10 seconds" part. I want to add styles to this text like making this text bigger as well as text colors.

(I am currently trying in WordPress)

I am a beginner and want help with this Thanks..

Javascript code -

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1000);
<button id="download">download</button>

Upvotes: 1

Views: 169

Answers (2)

BTSM
BTSM

Reputation: 1663

I think you can do like this.

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
newElement.style.color = "red";
newElement.style.fontSize = "20px";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1000);
<button id="download">download</button>

Upvotes: 1

gugateider
gugateider

Reputation: 2049

You can just use newElement.style.propertyName = "value"; For example, if you wish to make the text bigger you do newElement.style.fontSize = "50px";

And if you want to change the color you do newElement.style.color = "red";

This works but it will be very difficult to maintain, I would recommend you adding a css class to the element, by doing this you can set all your styles in the css class instead of the js.

newElement.classList.add("css-class-you-want-to-name");

Then you just create a simple css class

.css-class-you-want-to-name { 
  font-size: 50px;
  color: red;
}

Upvotes: 2

Related Questions