Question

我有html页面，我想使用颜色切换器更改页面样式。我尝试通过单击color-list div来将css文件添加到页面。

文件层次结构

index.html

css(folder)
-style2.css
-style3.css

js(folder)
-my.js

我的HTML

<div class="settings-section color-list">
    <div class="first"></div>
    <div class="second"></div>  
</div>

我也尝试使用jQuery

$('.color-list .first').on('click', function(){
    $("head").append($("<link rel='stylesheet' href='../colors-css/style2.css' type='text/css' media='screen' />"));
});

$('.color-list .second').on('click', function(){
    $("head").append($("<link rel='stylesheet' href='../colors-css/style3.css' type='text/css' media='screen' />"));
});

但它不起作用。我无法将css文件添加到头

Answer 1

对文件的引用必须从您的html开始，因此您必须使用colors-css/style2.css代替../colors-css/style2.css：

$("head").append($("<link rel='stylesheet' href='colors-css/style2.css' type='text/css' media='screen' />"));

Answer 2

试试这个..

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/style1.css"
}).appendTo("head");

Answer 3

您可以添加默认链接标记，并在jquery点击事件集中添加相应的href

HTML标记：

<link id="dynamicCSS" rel='stylesheet'  href='#' type='text/css' media='screen' />

jQuery代码：

$(document).ready(function(){

    var dynCSSk= $("#dynamicCSS");

    $('.color-list .first').on('click', function(){
         dynCSSk.attr("href","colors-css/style2.css");
    });

    $('.color-list .second').on('click', function(){
        dynCSSk.attr("href","colors-css/style3.css");
    });

});

Answer 4

您可以通过双向解决问题

1） - 使用类

在CSS文件中创建CSS类

.list-style{
   backbround : red;
}

在你的jQuery写下面：

$（＆＃39; .color-list .first＆＃39;）。addClass（＆＃39; list-style＆＃39;）;

2） - 使用以下查询

$('.color-list .first').css('background','green');

Answer 5

试试这个希望它会对你有所帮助。

$（document）.on（＆＃34;点击＆＃34;，＆＃34; .color-list div＆＃34;，function（）{

var currentCssUrl=$(this).attr('id');
$.ajax({
url : currentCssUrl,
success : function(data){        
$("<style></style>").appendTo("head").html(data); 
}
});

}）;

请查看以下截图

preventing csrf in php

使用jquery添加css文件

5 个答案: