Add a css file with JS [duplicate]

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
– Denys Séguret, Commented Sep 4, 2014 at 13:09

Marko · Accepted Answer · 2014-09-04 13:47:14Z

1

  <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 4, 2014 at 13:47

answered Sep 4, 2014 at 13:11

Marko

11.1k17 gold badges73 silver badges94 bronze badges

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

3 Comments

AndreyPr Over a year ago

Hi, and how I can correctly run this JS by click on div

Marko Over a year ago

add the function as a eventhandler when the page loads. Put the script in the page.

AndreyPr Over a year ago

I have mistake in my JS. I have cretaeElement and I need createElement

Benjamin · Accepted Answer · 2014-09-04 13:11:26Z

1

Try this

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

answered Sep 4, 2014 at 13:11

Benjamin

2,6902 gold badges24 silver badges34 bronze badges

Comments

steo · Accepted Answer · 2014-09-04 13:11:23Z

0

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); 
 };
})

answered Sep 4, 2014 at 13:11

steo

4,6762 gold badges36 silver badges66 bronze badges

Collectives™ on Stack Overflow

Add a css file with JS [duplicate]

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related