Question

我有一个HTML标记，我有几个CSS文件，它们为HTML元素分配了不同的属性，这些属性将作为标记的主题。说Markup就像是

<div id=main>
    <div>{More HTML elements, divs, spans etc}</div>
    <div>{More HTML elements, divs, spans etc}</div>
</div>

而css就像

/*first.css*/
#main{
    someProperty: values;
}

#main div, #main ul li {
    someProperty: values;
}

另一个css文件

/*second.css*/
#main{
    someProperty: some other values;
}

#main div, #main ul li {
    someProperty: some other values;
}

有更多具有不同属性和值的css文件。

我想要做的是，只需点击一下按钮，我就可以在不更改标记的情况下更改标记的CSS。所以它会像

$('.btn').click(function(){
    var file = $(this).attr('id');
    //remove the previous css file
    //add the new css file (filename is the js var file+'.css')
});

我不能继续$('#someId').css({ /* properties */});，因为CSS文件中有很多属性。

那么我该如何最好地处理这个？

Answer 1

我想说你可以拥有单个css，它具有你想要在不同类中拥有的不同属性。每当你想改变什么。只需使用.removeClass()删除当前的类，然后使用.addClass()添加新类。

如果您想切换css文件。看看here

Answer 2

您可以使用jQuery从link轻松删除head个元素，它们将被视为任何其他HTML元素。

您可以使用以下方法从文档中删除某个CSS文件：

$('link[href="fos.css"]').remove();

然后您可以在head中添加另一个：

var newCss='fos2.css';
$('head').append('<link rel="stylesheet" type="text/css" href="'+newCss+'">');

或者如果你想玩得好：

var newCss='fos2.css';
$('<link>')
    .attr({
        rel: 'stylesheet',
        type: 'text/css',
        href: newCss
    })
    .appendTo('head');

我为你创建了simple jsFiddle test case。

Answer 3

保持有关布局的信息，不受颜色，图像等的影响。如果可能，为身体标签创建一个css样式，其中包含颜色信息。

使用jQuery为标记和不同的CSS文件更改CSS属性

3 个答案: