在JavaScript事件中更改图像大小

Question

我使用的是我离线购买的使用JavaScript的模板。 我对JavaScript不太满意，我希望这样做，以便一旦用户单击上面示例中的链接之一，徽标就会从小变大。

之前：

后：

就像我在不擅长JavaScript之前所说的那样，我相当擅长HTML和CSS，但对高级CSS却有些不满。 有没有一种方法可以在页面更改上执行此操作。 此代码仅是一个页面，不会从服务器重新加载，因此无法通过“页面加载”设置事件。 加载是通过JavaScript完成的。 要进行现场演示，请转到此处： 徽标更改网站

Answer 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>来达到不固定的高度； 当徽标更改大小时，这将使其调整大小。

Answer 2

您可以使用一些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 librairie。 有关于jquery的文档。

编辑：您也可以做的是创建一个可以调用ajax.0-1.js或任何其他名称的外部js文件，然后将此文件链接到html页面。

Answer 3

我看到您在页面上加载了jQuery，这很好，因为它使此任务变得很简单;）

</body>之前

<script type="text/javascript">
    $(document).ready(function(){
        $('.navigation li').on('click', function(){
                $('#img-logo').css('width','212px');
                $('#img-logo').css('height','70px');
        });
    });
</script>

然后更改您的html：

<img src="http://yakko.cs.wmich.edu/~brain/SAS/images/logo.png" alt="logo"  id="img-logo"/>

您可以在这里找到jsfiddle：
http://jsfiddle.net/arqjn/

您可以根据需要在css-transition上添加一些效果
确保使用良好的图像（在普通视图下为双倍尺寸），否则变焦时会模糊