如何使用document.getElementById在倒数计时器中为输出元素添加类（样式）？

Question

I've done my countdown timer simple but now I would like to add style for it in Javascript.How can I do this?Is it possible to output value different?If yes,how?

Here is source

 var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); 

 .countdown { margin:0 auto; font-weight: 100; font-size:3em;color: white; width: 100%; text-align: center; background-image:blue; } 

 <div class="countdown" id="demo"></div> 

Answer 1

Your Fiddle link is empty, but from the title of the question I guess, you want to add a CSS class to an element that you get using getElementById() in pure javascript. If so, here is an option:

document.getElementById('your_element_id').classList.add('class_to_add');

Answer 2

Here is a page that explains how to set an element's style by changing its class or by manipulating its style.

https://www.w3schools.com/jsref/met_element_setattribute.asp