Question

我有一个项目（div）的画廊浮动在我的页面中，我的主要CSS文档允许三个DIVS并排显示在他们开始填充下一行之前（我已经定义了我的主要宽度） CSS）。现在我正在尝试创建一个允许五个DIVS并排出现的链接。我已经创建了另一个CSS文档（我将它包含在主CSS下面），它将不同宽度应用于DIVS并允许更多并排显示。

我正在寻找的是一个JS功能，它允许我在3 DIVS和5 DIVS之间切换，例如“放大/缩小”按钮。但是，在我的情况下，不只是改变一个类的宽度。该按钮还需要隐藏其他DIVS，更改字体大小等。我已经找到了CSS，它有效，我只是在寻找一种方法来加载和使用函数I应用/取消应用CSS文档可以使用链接标记激活（a）。

我的JS知识很少，所以如果你能帮我一个函数，你能告诉我如何使用HTML创建/激活按钮吗？（我需要知道在 a href =“）之后要放什么

由于

Answer 1

试试这段代码：

<强> 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。

Answer 2

$(document).ready(function () {

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

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

  });

});

添加并应用带有按钮/链接的新CSS样式表

2 个答案: