使用按钮/链接添加并应用新的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样式表

回答

相关问题