描述问题
javascript改变img宽度属性,如果带px单位,结果变为0;
相关代码
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的方式失效,如:
document.getElementById("test").width; //undefined
document.getElementById("test").width = 1200; //无效
document.getElementById("div").setAttribute("width", "1200");//只能通过这种方式改变属性width的值,但不管怎么改变,都不会影响div的宽度值,因为width只是div的一个自定义属性
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。