CODEWITHSUNDEEP
javascripthtmlcss
userZolika
userZolika

Reputation: 51

How can I display a value in Javascript with css?

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

Upvotes: 0

Views: 58

Answers (2)

luckyape
luckyape

Reputation: 722

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.

Upvotes: 1

niorad
niorad

Reputation: 1370

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

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

Upvotes: 0

Related Questions