使用jQuery爲標記和不同的CSS文件更改CSS屬性

我有一個HTML標記，我有幾個CSS文件具有爲HTML元素分配的不同屬性，這些屬性將用作標記的主題。說標記是一樣的東西使用jQuery爲標記和不同的CSS文件更改CSS屬性

<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文件中的許多特性。

那麼，我該如何最好地處理這？

來源

2011-06-02 ptamzz

我會說你可以有不同的屬性，你想在不同的類中有不同的屬性。每當你想改變一些東西。只需使用.removeClass()刪除當前班級，並使用.addClass()添加新班級。

如果你想切換CSS文件。看看here

來源

2011-06-02 07:24:57

保持獨立的顏色，圖像等獨立的佈局信息。如果可能的話，創建一個css樣式的身體標籤，其中有顏色的信息。

來源

2011-06-02 07:27:06 Rupin

您可以使用jQuery輕鬆地從head中刪除link元素，它們被視爲任何其他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。

來源

2011-06-02 07:28:33 kapa

使用jQuery爲標記和不同的CSS文件更改CSS屬性

回答

相關問題