关于javascript: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的一个自定义属性

以上为顺手转载记录