Question

我在这里找到了一些关于我的问题的问题，但是我无法使用它。我将在通过JS，JQuery

点击它们时更改css属性

 <!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>

和我的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";
}

它不起作用:(为什么？

Answer 1

尝试使用以下内容：

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

Answer 2

试试这个

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

Answer 3

  <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>

你需要将它附加到头部。

用JS添加一个css文件

3 个答案: