JavaScript中通过style修改属性时需要添加“px”

今天写练习时，发现通过CSS的style修改属性时 必须添加单位

---

然后又发现了一些问题

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

1.代码规范

经过了解,其中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的方式失效，如：

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

以上为随手转载记录