How can I display a value in Javascript with css?

Question

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."; 
}

luckyape · Accepted Answer · 2022-10-26 14:58:02Z

1

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'.

If you wanted to add an href to the a you could do something like

a.href = "/closed"

You may find this helpful. https://www.w3schools.com/jsref/dom_obj_anchor.asp

Good luck.

edited Oct 26, 2022 at 14:58

answered Oct 25, 2022 at 13:15

luckyape

7329 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

userZolika Over a year ago

Thank you. But how do I link this to.innerHTML = "We are Closed, faculty.";; how do I link this to that? a.style.borderWidth=1; a.style.borderColor= '#1a8917' Where should I put it, before, under, in? How do I do it?

luckyape Over a year ago

That is quite simple, I have included an example in my original answer.

Zachiah Over a year ago

The order of those lines doesn't matter much at all. It's just what order are they going to be executed. It doesn't matter if you change the borderWidth and then add the text or do it the other way around.

niorad · Accepted Answer · 2022-10-25 12:58:28Z

0

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

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

answered Oct 25, 2022 at 12:58

niorad

1,38010 silver badges14 bronze badges

Collectives™ on Stack Overflow

How can I display a value in Javascript with css?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related