Javascript 如何使用javascript更改html中的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4539019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change attribute in html using javascript
提问by dramasea
This is my code, so how can i change the width attribute?
这是我的代码，那么如何更改宽度属性？
<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>
The above is fail and the image no change at all!!
以上是失败的，图像根本没有变化！！
But why when i use this code(copy from other site), the image is change
但是为什么当我使用此代码（从其他站点复制）时，图像会发生变化
<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>
回答by tvanfosson
The most likely reason that your code is not working is that it is being executed before the element exists in the DOM. You should set your code up to run on the window loadevent or place it at the end of the document to ensure that the element exists before you try to access it.
您的代码不工作的最可能原因是它在元素存在于 DOM 之前被执行。您应该将代码设置为在 windowload事件上运行或将其放在文档的末尾以确保在您尝试访问该元素之前存在该元素。
<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>
回答by Mads Mogensh?j
Put in in the onloadevent for the window, so the code does not execute before the image html code has loaded. And use the widthattribute to set width.
放入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>
回答by Shadow Wizard is Ear For You
You mentioned width, if you're after resizing the image only if it's bigger than some specific width, you can use the onloadevent of the image itself:
您提到了宽度，如果您仅在图像大于某个特定宽度时才调整图像大小，则可以使用onload图像本身的事件：
<img src="hi.jpg" id="cpul" onload="if (this.width > 100) this.width = 100;" />
This will resize the image to 100 pixels width (and respective height) only if it's bigger than 100 otherwise it won't change anything, i.e. it will make the image smaller but not bigger.
只有当它大于 100 时，这才会将图像调整为 100 像素的宽度（和相应的高度），否则它不会改变任何东西，即它会使图像变小但不会变大。
If you meant changing the image source via code the other answers are all you need. :)
如果您的意思是通过代码更改图像源，那么您只需要其他答案。:)
回答by Jan Han?i?
You are trying to access a DOM element when that element is not yet created. Move your scripttag to the bottom of the page (just before the closing body).
您正在尝试访问尚未创建的 DOM 元素。将您的script标签移到页面底部（就在结束之前body）。
As for "changing the width of the image". Once you get the image (via document.getElementById), just set it's widthproperty:
至于“改变图像的宽度”。获得图像（通过document.getElementById）后，只需设置它的width属性：
var myImg = document.getElementById ( 'imgsid' );
myImg.width = 100;
回答by Quentin
In your first example, the JavaScript is executing immediately. At this stage, the document is still be parsed and no element with the specified id exists in the DOM.
在您的第一个示例中，JavaScript 正在立即执行。在此阶段，文档仍在解析中，DOM 中不存在具有指定 id 的元素。
In the second example, the JavaScript is executing in response to a changeevent, which won't fire until the element exists (well, not unless someone is very veryquick with the mouse).
在第二个示例中，JavaScript 正在响应一个change事件而执行，该事件在元素存在之前不会触发（好吧，除非有人非常快速地使用鼠标，否则不会触发）。
You need to delay the JavaScript call until after the element exists by either:
您需要通过以下任一方式将 JavaScript 调用延迟到元素存在之后：
- Moving the
<script>to after the<img> - Changing the script so it defines a function, and then calling that function in response to an event (such as
load).
- 移动
<script>到之后<img> - 更改脚本以定义一个函数，然后调用该函数以响应事件（例如
load）。
