Css code inside JS file

Question

I remember from somewhere some simple way to use css code inside JS file, but can't remember how exactly.

Obviously simply putting the css code inside JS file won't work, I guess there's a need for some comments or something like that.

*Note: I don't want to use JS to render a <link...> for a css file. I want load JS file normally with <script...> and inside a *.js file I want include pure css code, as it would appear normally in *.css file.

You're looking for this stackoverflow.com/questions/14753147/… — kashesandr
– kashesandr, Commented Aug 2, 2016 at 10:08

user6390636 · Accepted Answer · 2016-08-02 10:11:06Z

3

$("#id").css("parameter","property");

example..

$("#id").css("border","1px solid");

for multiple css..

$("#id").css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

better to use

addClass( )

function.. for multiple css property..

answered Aug 2, 2016 at 10:11

user6390636

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

2 Comments

uhrr Over a year ago

It doesn't related to the question, @Pikachu

user6390636 Over a year ago

document.write('<link href="../css/test.css" rel="stylesheet" type="text/css"></link>'); You use this line for adding whole css file using JS in *.js file.

Arpit Goyal · Accepted Answer · 2016-08-02 10:13:27Z

0

Nice little function to add Internal CSS Block to document

function createStyleNode(cssText, options, doc) {
    doc = doc || document;
    var style = doc.createElement('style');
    style.type = 'text/css';
    if(options && options.id){
        style.id = options.id;
    }
    if (style.styleSheet){
        style.styleSheet.cssText = cssText;
    } else {
        style.appendChild(doc.createTextNode(cssText));
    }
    return style;
}


cssText = 'body {color: red}';
head.appendChild(createStyleNode(cssText, {'id': 'stylesFromJS'}));

Adding Ids will be useful, if you are planning to delete / replace them later from JS.

answered Aug 2, 2016 at 10:13

Arpit Goyal

1,00512 silver badges25 bronze badges

5 Comments

uhrr Over a year ago

It doesn't related to the question, @Arpit Goyal

Arpit Goyal Over a year ago

@uhrr please make the question a but more clear, either you want inline styles or internal styles, both answers are there, the approach can only be changed.

uhrr Over a year ago

External styles. Inside the *.js file, @Arpit Goyal Take a look at the *Note in my post

Arpit Goyal Over a year ago

It says: I don't want to use JS to render a <link...> for a css file. which is what external styling is. Read w3schools.com/css/css_howto.asp

uhrr Over a year ago

Hm. What I meant is: I don't want to use JS code, to build a <link> element. If that could be confusing, the next thing isn't: I need a css code to be read from *.js file.

Collectives™ on Stack Overflow

Css code inside JS file

2 Answers 2

2 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Linked

Related