How to add CSS using JavaScript?

Question

So far, I have found very mixed information.. How can I simply add these CSS elements to the same HTML file using JavaScript? Thank you very much in advance!

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
}

ul {
    list-style-type: disc;
    padding: 1rem 1rem 1rem 4rem;
    list-style: 1.5;
    list-style-position: inside;
}

h1 {
    font-size: 24px;
    color: rgb(247, 34, 211);
    padding-bottom: 2rem;
}

h2 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

I have to ask, why _using Javascript_? What problem are you trying to solve? I bet it's another XY problem — Jeremy Thille, Oct 26 '21 at 07:18
If you have a legitimate use case to do anything like this, then [How do you add CSS with Javascript?](https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript) has plenty of approaches. — CBroe, Oct 26 '21 at 07:20
I am learning Javascript and I want to understand how Javascript can be used to add css — , Oct 26 '21 at 07:20
But this question sounds very weird. You want to do some random thing, like... adding CSS to HTML with Javascript (why?? Like, why would you do that? For what purpose? It's not something you do randomly). So you try to do this random thing without purpose, don't know how to do it, so you're asking for help; but we don't really know how to help you with this weird requirement... It's like a chemist randomly mixing two elements to see what reaction happens — Jeremy Thille, Oct 26 '21 at 07:27

score 2 · Answer 1 · answered Oct 26 '21 at 07:19

2

You can create an class like:

.bodystyle {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
}

and add it with js to your body element:

document.querySelector("body").classList.add("bodystyle")

answered Oct 26 '21 at 07:19

bill.gates

14,145
3
19
47

score 0 · Answer 2 · answered Oct 26 '21 at 07:27

I guess you must use property style in javascript as:

document.getElementById("myH1").style.color = "red";

or for add a style page in HTML :

<head>
<title>
    Load CSS file using JavaScript
</title>

<script>
  
    // Create new link Element
    var link = document.createElement('link'); 

    // set the attributes for link element
       link.rel = 'stylesheet'; 
  
    link.type = 'text/css';
  
    link.href = 'style.css'; 

    // Get HTML head element to append 
    // link element to it 
    document.getElementsByTagName('HEAD')[0].appendChild(link); 

</script>

you can use this link for more information

score 0 · Answer 3 · answered Oct 26 '21 at 07:50

It sounds as though what you'd like to do is add a stylesheet to the head of your current HTML.

It's like adding any other element to the existing HTML. Create a style element, put the CSS you want into it, add the style element to the head element in your HTML.

Obviously to see the effect of running this snippet you'll have to look in your browser's dev tools inspect facility to see that the new stylesheet has been added to the end of the head element.

const stylesheet = document.createElement('style');
stylesheet.innerHTML = `body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
}

ul {
    list-style-type: disc;
    padding: 1rem 1rem 1rem 4rem;
    list-style: 1.5;
    list-style-position: inside;
}

h1 {
    font-size: 24px;
    color: rgb(247, 34, 211);
    padding-bottom: 2rem;
}



h2 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}`;
document.querySelector('head').appendChild(stylesheet);

<!doctype html>
<html>

<head>
</head>

<body>
</body>

</html>

How to add CSS using JavaScript?

3 Answers3