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

文章图片

今天写练习时，发现通过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类型
【JavaScript中通过style修改属性时需要添加“px”】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的一个自定义属性
以上为随手转载记录