使用按鈕/鏈接添加並應用新的CSS樣式表

我已經獲得了一個浮動在我的頁面中的項目（div）畫廊，並且我的主CSS文檔允許三個DIVS在開始填充之前並排顯示下一行（我在主CSS中定義了寬度）。現在我正在嘗試創建一個允許五個DIVS並排顯示的鏈接。我創建了另一個CSS文檔（我將它包含在主CSS下面），它將不同的寬度應用於DIVS，並允許更多的並排顯示。使用按鈕/鏈接添加並應用新的CSS樣式表

我在找的是一個JS功能，可以讓我切換3 DIVS和5 DIVS，比如「放大/縮小」按鈕。然而，就我而言，這不僅僅是改變一個班級的寬度的問題。該按鈕還需要隱藏其他的DIVS，更改字體大小等。我已經找到了CSS，它的工作原理，我只是尋找一種方法來加載和應用/不使用CSS文檔使用函數I可以用鏈接標籤（a）激活。

我對JS的知識很少，所以如果你能幫助我一個函數，你能告訴我如何使用HTML創建/激活按鈕嗎？（我需要知道A HREF後放什麼=」）

感謝

來源

2012-07-16 toams7

試試這個代碼：

JS：

function init() { 
    document.getElementById('toggle-button').addEventListener('click', toggle_style, false); 
} 
function toggle_style() { 
    if(document.getElementById('dynamic-style').href == window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/style1.css') { 
     document.getElementById('dynamic-style').href = 'style2.css'; 
    } else { 
     document.getElementById('dynamic-style').href = 'style1.css'; 
    } 
} 
window.addEventListener('load', init, false);

HTML：

<input id="toggle-button" type="button" value="Toggle Style" />

要查看示例和完整源代碼，請參閱http://shaquin.tk/experiments/togglestyle.html。

來源

2012-07-16 05:21:31

起初我無法弄清楚，但我進入演示源並在CSS上找到標籤。這太棒了！謝謝！對不起，這個回覆太晚了。 – toams7 2012-11-18 01:52:34

沒關係。如果您發現它有用，請注意這一點:-) – 2012-11-18 02:18:21

$(document).ready(function() { 

    $("a").click(function() { 

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

    }); 

});

來源

2017-06-19 09:09:12

使用按鈕/鏈接添加並應用新的CSS樣式表

回答

相關問題