Làm cách nào để chuyển đổi CSS stylesheet bằng jQuery?

Question

Điều tôi đang làm rất đơn giản.

Bạn bấm vào một nút (id="themes") và nó mở ra một div (id="themedrop") trượt xuống và liệt kê các chủ đề. (Tôi chỉ có hai vào thời điểm này)

<button id="original">Original</button><br /> 
<button id="grayscale">Grayscale</button> 

Bây giờ khi trang web được nạp nó tải với style1.css (chủ đề chính/gốc)

<link rel="stylesheet" type="text/css" href="style1.css"> 

Bây giờ những gì tôi đang cố gắng tìm ra là ... Làm thế nào tôi có thể có nó khi nút màu xám được nhấp để thay đổi biểu định kiểu từ style1.css thành style2.css (lưu ý: các tệp nằm trong cùng thư mục)

Bất kỳ trợ giúp nào cũng được đánh giá cao.

Answer 1

$('#grayscale').click(function(){ 
    $('link[href="style1.css"]').attr('href','style2.css'); 
}); 
$('#original').click(function(){ 
    $('link[href="style2.css"]').attr('href','style1.css'); 
}); 

Hãy thử điều này nhưng không chắc chắn nếu nó hoạt động, tôi chưa thử nghiệm nhưng may mắn.

Answer 2

Tôi khuyên bạn nên cung cấp link -tag một id chẳng hạn như chủ đề. Đặt tên của file css trong một -attribute data vào các nút và sử dụng bộ xử lý tương tự trên cả hai:

Html:

<link id="theme" rel="stylesheet" href="style1.css"> 

<button id="grayscale" data-theme="style2.css">Gray Theme</button> 

Và js:

$("button[data-theme]").click(function() { 
    $("head link#theme").attr("href", $(this).data("theme")); 
} 

Answer 3

cách nhanh chóng để làm điều đó là,

<link id="original" rel="stylesheet" type="text/css" href="style1.css"> 
<script> 
function turnGrey(){ 
document.getElementById("original").href="grey.css";<!-- what ever your new css file is called--> 
} 
</script> 
<button id="grey" onclick="turnGrey">Turn Grey</button><br /> 

Answer 4

Sử dụng:

<link href="Custom.css" rel="stylesheet" /> 
<link href="Blue.css" rel="stylesheet" /> 
<link href="Red.css" rel="stylesheet" /> 
<link href="Yellow.css" rel="stylesheet" /> 



<select id="changeCss"`enter code here`> 
     <option onclick="selectCss(this)" value="Blue">Blue</option> 
     <option onclick="selectCss(this)" value="Red">Red</option> 
     <option onclick="selectCss(this)" value="Yellow">Yellow</option> 
    </select> 

<script type="text/javacript"> 
function selectCss() { 
      var link = $("link[rel=stylesheet]")[0].href; 
      var css = link.substring(link.lastIndexOf('/') + 1, link.length) 
      $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css'); 
     } 
</script>