JavaScript Image (如何使用 document.getElementById().src=) 设置高度和宽度)

如何将灌木图片设置为100px？

<!DOCTYE html>
<html>
    <head>
        <title> Title </title>
        <script>
        </script>
    </head>
    <body>
        <button type = button onclick = "document.getElementById('myImage').src='bush.jpg'">Bush</button>
        <button type = button onclick = "document.getElementById('myImage').src='obama.jpg'">Obama</button>
        <p>Default is Obama </p>
        <img id = "myImage" src = "obama.jpg" style = "width: 100px;  height: 100px">
    </body>
</html>

我正处于学习JavaScript的开始阶段。不确定真正需要哪些其他信息。我只是想从事全堆栈Web开发工作，并意识到我在学校学到的工作(Java/c/c (的工作较少。我知道这是一个相对简单的问题，但不知道该如何搜索答案，因为我不知道该如何表达这个问题...哈哈...有一些体面经验的人知道该怎么做？

您的样式属性中有无效的信息。您的图像标签看起来像这样：

<img id = "myImage" src = "obama.jpg" style = "width: 100px height: 100px">

，应该像这样：

<img id = "myImage" src = "obama.jpg" style = "width: 100px; height: 100px;">

注意添加的;

这是动态上设置样式的示例。我使用函数切换图像。

<button type = button onclick = "changeImage('bush');">Bush</button>
<button type = button onclick = "changeImage('obama')">Obama</button>
<p>Default is Obama </p>
<img id = "myImage" src = "https://whitehouse.gov1.info/photos_obama_face/obama-happy-flag.jpg" style = "width: 100px;  height: 100px" />
<script>
function changeImage(chump) {
    var img = document.getElementById('myImage');
    if(chump === 'obama') {
        img.src = 'https://whitehouse.gov1.info/photos_obama_face/obama-happy-flag.jpg';
        img.style.width = '100px';
        img.style.height = '100px';
    }
    else {
        img.src = 'http://www.capitolhillblue.com/wp-content/uploads/2011/07/071511bush.jpg';
        img.style.width = '200px';
        img.style.height = '200px';
    }
}
</script>

相关内容

最新更新

热门标签：