How can I display a value in Javascript with css?-CodePudding

I have the following code (works fine). I would like to set different background, font level, outline for open and closed elements.

a.innerHTML = "We are Open now now.";

a.innerHTML = "We are Closed, arm.";

I would also like to have it, not here, but in this code you can display the text differently: I could format it in css, but I can't do it with javascript. Could you help me with an example or two?

var a = document.getElementById("hoursofoperation"); var d = new Date(); var n = d.getDay(); var now = d.getHours()   "."   d.getMinutes(); var weekdays = {
    0: null,//Sunday
    1: [8.30, 21.30],
    2: [6.00, 11.30],
    3: [8.30, 12.00],
    4: [8.30, 12.00],
    5: [8.30, 12.30],
    6: null //Saturday

};   
var dayWorkingHours = weekdays[n];//Today working hours. if null we are close


if (dayWorkingHours && (now > dayWorkingHours[0] && now < dayWorkingHours[1])) {
    a.innerHTML = "We are Open now now."; 
} else {
     a.innerHTML = "We are Closed, kar."; 
}

CodePudding user response：

You can access styles via a.style.color = "blue" for example.

You could also use CSS and classes via a.classList.add("blue")

CodePudding user response：

You can easily apply styling in javascript like this a.style.backgroundColor = 'green'. Notice that properties that are hyphenated in CSS become camel cased in Javascript.

To create an outline you would use borders in the same way as CSS, should look something like a.style.borderWidth=1; a.style.borderColor= '#1a8917'.

Good luck.