javascript无法修改带px单位的标签宽度 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

javascript无法修改带px单位的标签宽度

2016-06-20 18:38:17 1713 1

描述问题

javascript改变img宽度属性,如果带px单位,结果变为0;

相关代码

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

相关截图
screenshot

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:44:27

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

    0 0
相关问答

1

回答

如何用js阻止后续的javascript标签的载入?

2016-03-24 09:38:20 2695浏览量 回答数 1

1

回答

JavaScript 类数组对象的定义?

2020-04-04 10:34:37 546浏览量 回答数 1

1

回答

在JavaScript中获得两个数组的并集

2020-02-09 11:40:10 215浏览量 回答数 1

1

回答

JavaScript关联数组的长度

2020-02-09 14:05:51 371浏览量 回答数 1

1

回答

如何将JavaScript对象的属性值提取到数组中?

2020-02-09 12:58:43 260浏览量 回答数 1

1

回答

旋转JavaScript中数组中的元素

2020-02-09 11:56:06 248浏览量 回答数 1

1

回答

对象是否以javascript的深层或浅层副本推送到数组中?

2020-02-08 22:00:58 259浏览量 回答数 1

2

回答

有没有办法使用JavaScript以相反的顺序在数组上使用map()?

2020-02-08 21:51:58 442浏览量 回答数 2

2

回答

在Javascript中,将NodeList转换为数组的最佳方法是什么

2020-02-08 20:37:57 472浏览量 回答数 2

1

回答

Javascript按两个字段对数组进行排序

2020-02-08 20:32:20 252浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载