乐趣区

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

以上为顺手转载记录

退出移动版