html - javascript无法修改带px单位的标签宽度

Question

描述问题

javascript改变img宽度属性，如果带px单位，结果变为0；

相关代码

<img id="iImg" width="300px" height="300px" onclick="changeImg()" src="">

document.getElementById("iImg").width=600;    //结果为  width="600";
document.getElementById("iImg").width="600px";//结果为  width="0"

相关截图

如果要实现改变后的宽度为600px,改怎么做？

Answer 1

1.代码规范

<img id="iImg" width="300px" height="300px" onclick="changeImg()" src="">

其中width="300px" height="300px"这种写法是不符合w3c规范的，用 The W3C Markup Validation Service 检测会报错。属性width、height的值是个非负数，直接写数字即可，如width="300"

2.width是img公认的（非自定义的）特性，会以属性的形式添加到DOM对象中，所以可以通过dom.attr的形式去操作属性值。

imgDom.width = value;//此处的value是个number类型的非负值，若value为其他值时，转化为0
console.log(typeof imgDom.width)//为number类型

document.getElementById("iImg").width=600;    //方式①，结果为 width="600"; 赋值成功 
document.getElementById("iImg").width="600px";//结果为 width="0" 赋值失败

因为width是img的属性，所以当然也可以用下面这种形式赋值：

document.getElementById("iImg").setAttribute("width", "600");//方式②

3.方式①②是通过改变img的属性值来改变图片的大小，也可以通过改变css样式来改变图片的大小，当两者同时改变，谁又占上风呢？

document.getElementById("iImg").style.width='600px';//方式③，这个是带px的，图片width渲染成功
document.getElementById("iImg").width=900;//只改变属性值，但不影响图片的大小

综上，如果只是改变图片显示的大小，可以使用上述三种方式来达到目的，当有css样式来控制图片大小的时候，属性值的改变不影响图片的实际渲染尺寸：

document.getElementById("iImg").width=600;//方式①，通过改变属性值来改变图片大小
document.getElementById("iImg").setAttribute("width", "600");//方式②，通过改变属性值来改变图片大小
document.getElementById("iImg").style.width='600px';//方式③，通过css样式来改变图片大小

---

补充：方式①和方式②的区别
当属性为自定义属性时，dom.attr的方式失效，如：

<!-- width为p的自定义属性，非公认的，不会以属性的形式添加到DOM对象中 -->
<p id="test" width="600">SegmentFault</p>

document.getElementById("test").width; //undefined
document.getElementById("test").width = 1200; //无效
document.getElementById("p").setAttribute("width", "1200");//只能通过这种方式改变属性width的值，但不管怎么改变，都不会影响p的宽度值，因为width只是p的一个自定义属性

Answer 2

document.getElementById("iImg").setAttribute("width", "600px");

或者修改CSS样式

Answer 3

首先img是行内元素。你设置宽高是不起作用的，请给img加样式display:block。这些应该可以设置宽高了。

Answer 4

document.getElementById("iImg").style.width='600px'

Answer 5

嗯，建议用css，或者用style=“width:600px”,然后再用js修改

Answer 6

xxx.style.width