0

オフラインで購入した JavaScript を使用するテンプレートを使用しています。私は JavaScript が苦手なので、ユーザーが上記の例のリンクのいずれかをクリックするとすぐに、ロゴが小さいものから大きいものに変わるようにしたいと考えています。

前： 前

後： 後

前に言ったように、私は JavaScript が苦手で、HTML と CSS はかなり得意ですが、高度な CSS にはまだ少し慣れていません。ページの変更時にこれを行う方法はありますか。このコードはすべて 1 つのページであり、サーバーからリロードされないため、「ページの読み込み」でイベントを設定できません。読み込みは JavaScript を介して行われます。ライブデモについては、ここにアクセスできます:ロゴ変更サイト

4

3 に答える 3

1

ロゴに次<img />のidような を付けます。

<img id="siteLogo" src="images/logo.png" alt="" height="200">

<script>次のようなタグを追加します。

<script type="text/javascript">
    var img = document.getElementById("siteLogo");
    img.addEventListener('click', function () {
        if (img.height != 200) {
            img.height = 200;
        } else {
            img.height = -1;
        }
    });
</script>

上記により、クリックするとロゴが大小に切り替わります。

次に、高さを固定<header>しないようにいじる必要があります。これにより、ロゴのサイズが変更されたときにサイズが変更されます。

于 2013-05-06T19:53:19.203 に答える
1

jquery を使用して、画像のプロパティを変更できます。これはいくつかの ajax で行うことができます:

jquery(function () {

    $("#your image id").click(function () {

        //Then you can change the style properties of your image, this is how you can do it.

        $("#image id you want to modify").attr("style","...");

        //the ... in the ", this is there you will edit your style.

    });

});

したがって、これはやりたいことを実行できる方法ですが、jquery を使用する場合は、jquery ライブラリをリンクする必要があることを知っておく必要があります。jqueryに関するドキュメントがあります。

編集: ajax.0-1.js などを呼び出すことができる外部 js ファイルを作成し、このファイルを html ページにリンクすることもできます。

于 2013-05-06T19:56:08.180 に答える