How to add CSS Link dynamically to elements?

$('head').append('<link type="text/css" rel="stylesheet" href="my css path">');

The below code doesnt work because we need to specify the url/path of the css file.

$('head').append('<SharePoint:CssLink runat=”server” Version=”4″ />');
  • In my suggestion, you should use delegate control.
    – Amit
    Commented Aug 3, 2015 at 8:25

3 Answers 3


The CssLink-Control is a server-side control. Jquery is only client-side, you can´t do that using jquery.


The other option can be to add a custom action (A scriptlink) Using SharePoint JSOM


Here's the "oldschool" way of doing it, which hopefully works accross 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.com/css/stylesheet.css';
    link.media = 'all';

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.