Add a css file with JS

Question

I have found here some questions about my problem, but I can't use it. I will change a css property of during click on them via JS, JQuery

 <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script src="../scripts/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <script src="../scripts/javascript.js"></script>
</head>
<body>
<div class="osn">
<span>Green</span>
</div>
<div class="osb">
    <span>Red</span>
</div>
</body>
</html>
<script>
/*$( document ).ready(function () { 
    $(".osn").mouseover(function() { 
        uploadcss()
        });
});*/
$( document ).ready(function () { 
    $(".osn").click(function addcss (csslink){});
});
</script>

and my javascript.js

function uploadcss() {$(".osb").css("border","15px solid blue")};
function downloadcss() {$(".osb").css("border","5px solid red")};

function addcss (csslink) {
    var csslink = document.cretaeElement ("link");
    csslink.rel = "stylesheet";
    csslink.type = "text/css";
    csslink.href="../css/test.css";
}

And it's doesn't work :( Why?

`cretaeElement` ? And you just create an element, you don't add it ? — Denys Séguret, Sep 04 '14 at 13:09
dup question --> http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript — Chris Hawkes, Sep 04 '14 at 13:10

score 0 · Answer 1 · answered Sep 04 '14 at 13:11

Try with something like:

$(function(){

  $(".my-btn").on('click', function(){
     loadCSS("path/to/style.css");
  });

  function loadCSS(href) {
     var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
     $("head").append(cssLink); 
 };
})

score 0 · Answer 2 · answered Sep 04 '14 at 13:11

0

Try this

$(document).ready(function () {
   $(".osn").click(function(){
       $('head').append('<link href="cssFolder/sheet2.css" rel="stylesheet" id="stylenew" />');
});

answered Sep 04 '14 at 13:11

Benjamin

2,612
2
20
32

marko · Accepted Answer · 2014-09-04T13:47:14.863

0

  <script>
   function addcss () {
    var csslink = document.createElement("link");
    csslink.rel = "stylesheet";
    csslink.type = "text/css";
    csslink.href="../css/test.css";
    document.getElementsByTagName("head")[0].appendChild(csslink); 
    return false;
   }  

   window.onload = function() {
     document.getElementById("mylink").onclick = addcss(); 
   }; 
  </script>

 <a href="#" id="mylink">mylink</a>

You need to append it to the head.

edited Sep 04 '14 at 13:47

answered Sep 04 '14 at 13:11

marko

10,684
17
71
92

Hi, and how I can correctly run this JS by click on div – AndreyPr Sep 04 '14 at 13:31
add the function as a eventhandler when the page loads. Put the script in the page. – marko Sep 04 '14 at 13:50
I have mistake in my JS. I have cretaeElement and I need createElement – AndreyPr Sep 04 '14 at 14:10

Add a css file with JS

3 Answers3