Question

这是我的代码，那么如何更改width属性？

<html>
<head>
<script type="text/javascript">
 document.getElementById("cpul").src="hello.jpg";
</script>
</head>
<body>

<img src="hi.jpg" width="100" height="100" id="cpul">

</body>
</html>

以上是失败的，图像根本没有变化!!

但是为什么当我使用这段代码（从其他网站复制）时，图像就会改变

<html>
<head>
<title>JS DD Function</title>
<script type="text/javascript">
    function jsDropDown(imgid,folder,newimg)
 { 
 document.getElementById(imgid).src="http://www.cookwithbetty.com/" + folder + "/" + newimg + ".gif";
 }
</script>
</head>
<body>
<table>
  <tr>
    <td>
Foods: <select name="food" onChange="jsDropDown('cful','images',this.value)">
       <option value="steak_icon">Steak</option>
    <option value="salad_icon">Salad</option>
    <option value="bread_icon">Bread</option>
    </select><br />
     </td>
  <td>
         <img src="http://www.cookwithbetty.com/images/steak_icon.gif" id="cful">

</body>
</html>

Answer 1

您的代码无法正常工作的最可能原因是它在元素存在于DOM之前执行。您应该将代码设置为在窗口load事件上运行，或者将其放在文档的末尾，以确保在您尝试访问该元素之前该元素存在。

<html>
<head>
   <title>Foo</title>
</head>
<body>

<img src="hi.jpg" width="100" height="100" id="cpul">
<script type="text/javascript">
   document.getElementById("cpul").src="hello.jpg";
</script>
</body>
</html>

Answer 2

输入窗口的onload事件，因此在加载图像html代码之前代码不会执行。并使用width属性设置宽度。

<html>
  <head>
    <title>Change my image width</title>
    <script type="text/javascript">
      window.onload = function() {
        var myImage = document.getElementById("cpul");
        myImage.src = "hello.jpg";

        // change width
        myImage.width = 200;
      };
    </script>
  </head>
  <body>
    <img src="hi.jpg" width="100" height="100" id="cpul"> 
  </body>
</html>

Answer 3

您正在尝试在尚未创建该元素时访问DOM元素。将您的script标记移至页面底部（在结束body之前）。

关于“改变图像的宽度”。获得图片后（通过document.getElementById），只需设置width属性：

var myImg = document.getElementById ( 'imgsid' );
myImg.width = 100;

Answer 4

在您的第一个示例中，JavaScript正在执行立即。在此阶段，仍然会解析文档，并且DOM中不存在具有指定标识的元素。

在第二个示例中，JavaScript正在执行以响应change事件，该事件在元素存在之前不会触发（好吧，除非有人非常非常快老鼠）。

您需要延迟JavaScript调用，直到元素存在之后：

将<script>移至<img>
更改脚本以便定义一个函数，然后调用该函数以响应事件（例如load）。

Answer 5

你提到宽度，如果你只是在大于特定宽度的情况下调整图像大小后，你可以使用图像本身的onload事件：

<img src="hi.jpg" id="cpul" onload="if (this.width > 100) this.width = 100;" />

只有当图像大于100时才会将图像调整为100像素宽度（以及相应的高度），否则它不会改变任何内容，即它会使图像变小但不会更大。

如果您的意思是通过代码更改图像源，则只需要其他答案。：）

如何使用javascript更改html中的属性

5 个答案: