Print it!

Using Javascript to insert css link into the head of a page

I would now like to insert (using pure javascript) an external reference to a style sheet. How can this be done? Using jquery you could do it like this:

var css_link = $("", < rel: "stylesheet", type: "text/css", href: "style.css" >); css_link.appendTo('head'); 

3 Answers 3

Quickly tried below in Chrome and it works..

var styleEl = document.createElement("link"); styleEl.type = "text/css"; styleEl.href = "style.css"; document.getElementsByTagName('head')[0].appendChild(styleEl); 

Place a tag in the head like this:

The document.write() function appends whatever text you have as the parameter right where the script is.

You can do it at runtime like this:

var css = document.createElement("LINK"); css.href = "style.css"; css.type = "text/css"; document.head.appendChild(css); 

Edit: document.head is compatible with normal browsers and IE9+

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to link css file on javascript

You probably think that writing the HTML like you do in notepad will work, but it won’t (The browser will not wait, it will auto-close the missing closing tags). You need to write that whole HTML in a single win.document.write

@MikeMcCaughan That duplicate don’t answer this specific issue, it’s just demonstre it, but doesn’t mention anything about multiple document.write as in this question

3 Answers 3

var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); var html = ''; html += $("#article_main_wrapper").html(); html += ''; win.print(); win.close(); win.document.write(html); // You need to append the `html` in a single element // Write it at once to a single win.document.write 

Here is an example of injecting css via javascript.

(function(d, s, id) < var css, icss = d.getElementsByTagName(s)[0] || d.getElementsByTagName('head')[0]; if (d.getElementById(id)) < return; >css = d.createElement(s); css.id = id; css.href = "http://getbootstrap.com/dist/css/bootstrap.min.css"; css.rel = "stylesheet"; >(document, 'link', 'bootstrap'));

  normal button to bootstrap button by adding css  

if it’s for printing with a new tab where you want to append content with css and then print, just go with there steps

var content = document.createTextNode("Some HTML content you want to print"); var css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = 'css url'; css.media = 'all'; printwindow.focus(); // if its a new tab where you want to do print operation, assuming printwindow is your new tab/popup opened by window.open() printwindow.document.head.appendChild(css); printwindow.document.body.appendChild(content); printwindow.print(); printwindow.document.close(); 

Источник

How to load up CSS files using Javascript?

Is it possible to import css stylesheets into a html page using Javascript? If so, how can it be done? P.S the javascript will be hosted on my site, but I want users to be able to put in the tag of their website, and it should be able to import a css file hosted on my server into the current web page. (both the css file and the javascript file will be hosted on my server).

19 Answers 19

Here’s the «old school» way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute unfortunately IE6 doesn’t support it consistently.

var cssId = 'myCss'; // you could encode the css path itself to generate id.. if (!document.getElementById(cssId)) < var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'http://website.example/css/stylesheet.css'; link.media = 'all'; head.appendChild(link); >

This example checks if the CSS was already added so it adds it only once.

Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.

VanillaJS

Here is an example that uses plain JavaScript to inject a CSS link into the head element based on the filename portion of the URL:

Insert the code just before the closing head tag and the CSS will be loaded before the page is rendered. Using an external JavaScript ( .js ) file will cause a Flash of unstyled content (FOUC) to appear.

Источник

How Can You Place CSS in JavaScript?

“Cascading Style Sheet(CSS)” is essential for applying styling to the overall document design and making a web page attractive and user-friendly. More specifically, placing CSS in JavaScript is very helpful in performing the complex functionalities in JavaScript, along with making the overall website or web page attractive and accessible.

This write-up will discuss examples of linking CSS with JavaScript.

How Can You Place CSS in JavaScript?

CSS can be placed in JavaScript by getting the HTML head element, creating a new link element, and setting its attributes for accessing the particular CSS file.

Check out the provided example to understand the stated concepts.

Example 1: Creating a Link in JavaScript and Appending it to the Heading Using CSS

In the following example, get the HTML head element using the “document.getElementsByTagName()” method which will include an element into the DOM (Document Object Model) dynamically:

Now, create a new link element using the “document.createElement()” method:

After that, set the attributes for the created link element for relating the current document with the linked document(CSS) by specifying the file type and the file name as follows:

The “appendChild()” method will append the link element which is specified as its argument to the HTML head:

In the below step, access the created element named “link” using the class attribute:

Finally, apply the CSS styling on the added heading.

CSS Code

In the above output, it can be observed that the CSS styling is applied on the specified heading by accessing the created link in JavaScript.

Example 2: Creating a Link in JavaScript and Appending it to div Using CSS

In the following example, repeat the above-discussed steps for getting the HTML head element, creating a new link element, assigning the attributes for the created link element, and appending the link element to the HTML head:

var linkCss = document. createElement ( ‘link’ ) ;

linkCss. href = ‘linkcss2.css’ ; document. getElementsByTagName ( ‘HEAD’ ) [ 0 ] . appendChild ( linkCss ) ;

Next, include a “div” in HTML and access the created link with the following value to be displayed on the DOM:

Lastly, implement the CSS styling on the specified div by referring to the created element “.link”. The styling includes the adjusting font-size, font-weight, color, background-color, padding, and text-align:

CSS Code

We have explained the procedure for placing CSS in JavaScript.

Conclusion

CSS can be placed in JavaScript by getting the HTML head, creating a new element, and setting the attributes for it, which results in linking the particular CSS file and appending it to the HTML head in order to be applied to the heading or div. This blog demonstrated the concept of placing CSS in JavaScript with the help of examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник