What is the best way to showcase a value in JavaScript using CSS styling?

I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below:

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

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

Additionally, I want to apply different styling to the text displayed within this JavaScript code block. While I could use CSS to format it, I am unsure how to achieve that with JavaScript. Can you provide me with some examples?

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

Answer №1

Applying styling in javascript is quite simple, for example, element.style.fontSize = '16px'. It's important to note that CSS properties with hyphens are written in camel case in Javascript.

To create an outline using borders in javascript, the syntax is similar to CSS:

element.style.borderWidth = '1px'; element.style.borderColor= '#000'
.

If you want to add a link to an element, you can achieve it like this:

element.href = "/page"

For more information, check out this resource: https://www.example.com/js/styling

Best of luck!

Answer №2

To change the color of a link using JavaScript, you can do so by accessing styles like a.style.color = "blue".

Another way to apply styling is by using CSS classes with

a.classList.add("blue")

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to load the threejs module

I am still learning about threejs and have mostly worked on projects using a dev server (vite) locally. This setup limited me to accessing my projects only from the browser on my computer. Here is how I typically include my files in these projects: <bod ...

Is there a foolproof method to verify if a user truly has visibility of a div element?

When I search online, most solutions only consider the viewport and/or the first parent container that is scrollable when trying to determine if a div is visible. However, I am wondering if there is a foolproof method to check if a div is truly visible t ...

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...

Tips for showcasing JSON data within an array of objects

I'm trying to work with a JSON file that has the following data: {"name": "Mohamed"} In my JavaScript file, I want to read the value from an array structured like this: [{value: "name"}] Any suggestions on how I can acc ...

Adding multiple lines of text using jQuery

I am facing an issue while trying to append a string to an HTML element. It works perfectly fine with a single line string, but breaks when I try to split it into multiple lines. <div><h4 >List to do:</h4><span id="added"></span ...

In PATCH requests, JSON data is not transmitted through Ajax

I'm attempting to send JSON data from the client to my server with the following code: $.ajax({ url : 'http://127.0.0.1:8001/api/v1/pulse/7/', data : data, type : 'PATCH', contentType : 'application/json' ...

Utilizing UTC Time with AngularUI's UI-Date Datepicker

My issue lies with the datepicker using localized time instead of UTC when making calls to the backend. To handle this, I've created a function that adjusts the value before posting it to the server: function adjustDateForTimeOffset(dateToAdjust) ...

The powerful combination of Ajax and Django creates a dynamic Like button

Encountering difficulties while trying to implement a basic like button feature. Despite following various tutorials, clicking on the Like button does not yield any action. See below: models.py class Comentario (models.Model): titulo = models.CharFie ...

Having trouble getting an AjaxBeginForm to function properly within a JQuery script on a PartialView

Within the main controller view, we bring in the partial view utilizing the following code: @Html.Partial("MapPartial", Model) Within the Partial View, I aim to display a map. Currently, there is an Ajax beginform with a submit button that ...

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

Enable the feature for users to upload images to a specific folder within the Chrome extension without the need for

I need to implement a feature in my Chrome extension that allows users to upload images directly to a specific folder named "upload" without needing a submit button. <form action="/upload"> <input type="file" name="myimages" accept="image/*"> ...

Sharing data from parent to child components in Vue.js: A guide to passing references

I need some help with this code snippet HTML Code: <div class="col-xs-4"> <h3 class="text-center">Incomplete task</h3> <div class="well" style="max-height: 300px;overflow: auto;"> <ul id="check-list-box" ...

Using JavaScript with Selenium, you can easily clear the input field and send

Here is a question input field. When clicked on, the h3 element with the name will disappear and the input tag will appear for entry of a new name. <td style="width:92%;"> <h3 id="question_tex ...

What is the best way to arrange 4 divs with 2 on each line?

Consider the divs provided below: <body> <div id="f1">{{ f1|safe }}</div> <div id="f2">{{ f2|safe }}</div> <div id="f3">{{ f3|safe }}</div> <div id="f4"> ...

Enable a button or class to dynamically alter its color

Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...

Is there a way for me to set a default filename when saving an HTML page?

On my webpage, such as www.example.com/NYSE/rates, I want to give the user the option to save the HTML they see on their local disk. When they click "Save as", I would like to automatically set the default filename to be NYSE_rates_09_12_2011.html. This fi ...

Text overflow occurs when content overflows the space of its container, causing the HTML element to

My English isn't the greatest, but I hope to convey the question clearly. I am attempting to create an editable text within a div. Typically, the text will overflow the size of the div, so I need to contain the text in the div using overflow:scroll. ...

What are the best methods to prevent infinity printing?

While attempting to create a clock that displays time in real-time after adding a time zone, I encountered an issue where the time was being printed multiple times. My objective is to have it printed once and dynamically change according to the different t ...

Utilize the Discord SDK to broadcast a message to every channel within a server whenever a command is utilized

In the process of development, I have crafted a new command: ! sir snd all -hello Essentially, this particular command instructs to dispatch the message specified after " - " to every channel located on the server where the command is initiated. Here&apo ...

Adding color dynamically to text within ion-card based on a regex pattern

My goal is to enhance the appearance of certain text elements by wrapping them in a span tag whenever a # or a @ symbol is detected, creating the look of usernames and hashtags on Twitter. Below is the code I am currently using: TS FILE: ngOnInit(): void ...