2

ページにフローティングするアイテム (div) のギャラリーがあり、メインの CSS ドキュメントでは、次の行に入力する前に 3 つの DIVS を並べて表示できます (メインの CSS で幅を定義しました)。現在、5 つの DIVS を並べて表示できるリンクを作成しようとしています。DIVS にさまざまな幅を適用し、より多くの要素を並べて表示できるようにする別の CSS ドキュメントを作成しました (メインの CSS の下に含めました)。

私が探しているのは、「ズームイン/ズームアウト」ボタンなど、3 つの DIVS と 5 つの DIVS を切り替えることができる JS 関数です。ただし、私の場合、1 つのクラスの幅を変更するだけの問題ではありません。このボタンは、他の DIVS を非表示にしたり、フォント サイズを変更したりする必要もあります。リンクタグ (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 に答える