2

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

我正在寻找的是一个 JS 函数，它允许我在 3 个 DIVS 和 5 个 DIVS 之间切换，例如“放大/缩小”按钮。但是，就我而言，这不仅仅是改变一个类的宽度的问题。该按钮还需要在其中隐藏其他 DIVS，更改字体大小等。我已经弄清楚了 CSS，它可以工作，我只是在寻找一种使用我的函数加载和应用/取消应用 CSS 文档的方法可以使用链接标签 (a) 激活。

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

谢谢

4

2 回答 2

3

试试这个代码：

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-16T05:21:31.600 回答
0 
$(document).ready(function () {

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

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

  });

});
于 2017-06-19T09:09:12.670 回答