我正在使用我离线购买的使用 JavaScript 的模板。我对 JavaScript 不是很好，我想让它在用户点击上面示例中的一个链接后立即从小到大：
之前：
之后：
正如我之前所说，我不擅长 JavaScript，我擅长 HTML 和 CSS，但在高级 CSS 方面还是有点灰心。有没有办法可以在页面更改时做到这一点。代码都是一个页面，不会从服务器重新加载，所以我不能通过“页面加载”设置事件。加载是通过 JavaScript 完成的。如需现场演示，您可以访问此处：Logo Change Site
【问题讨论】：
animate 函数的一个很好的应用程序。
标签： javascript html css dom-events image-size
给标志<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> 来没有 有一个固定的高度；这将使它在徽标更改大小时调整大小。
【讨论】：
您可以使用一些 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 页面。
【讨论】：
我看到您在页面上加载了 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 上添加一些效果
确保使用良好的图像（在正常视图中放大两倍），否则您会在缩放时看到模糊
【讨论】：