javascript控制css中style.width和style.height属性时单位px的问题

最新推荐文章于 2025-07-08 09:53:50 发布
最新推荐文章于 2025-07-08 09:53:50 发布
阅读量1.7w 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript的学习 文章标签： javascript css div ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GreenOfBamboo/article/details/4650282
本文探讨了在Internet Explorer (IE) 和Firefox (FF) 浏览器中使用JavaScript控制CSS元素的宽度和高度时的不同行为。具体讨论了在IE中设置或获取元素的宽度和高度时单位'px'的处理方式，并对比了Firefox的行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在MS的ie中，javascript控制css中style.width和style.height属性时单位px的问题：

1、在读style.width时，返回px

 如：alert(document.getElementById("DIV1").style.width)     ---->output 100px

2、在写style.width时，

  如：document.getElementById("DIV1").style.width=100;

或者

  document.getElementById("DIV1").style.width="100px"

两者都可以。

但是，在ff中，读写都有px。

 

我们可以利用parseInt(document.getElementById("DIV1").style.width)来读取整数值。

js获取不带单位的像素值
weixin_33729196的博客
07-20 357
所谓获取不带单位的像素值就是获取比如元素的宽度、高度、字体大小、外边距、内边距等值但是去掉像素单位。　　比如：某一个元素的宽度是100px，现在我要获取这个这个值但是不带单位“px”，对于这种问题你会怎么解决？我的解决办法是：　　比如通过点击某个按钮来获取该值，那么此时就应该写个函数，在点击按钮时再来调用该函数。　　function par（str）{　　　　var num ...
javascript 求div宽度时去掉px的超高效写法
cai555的专栏
04-28 3701
<html> <head> <style type="text/css"> div#mydiv { width: 100px; height: 100px; background-color: red; } </style> <script language="JavaScript"> fun
深入解析JavaScript获取元素宽度的多种方式
最新发布
Joker的博客
07-08 613
准确获取元素宽度是前端开发中的基础但关键的任务。基础场景和提供了最直接的访问方式精确计算可以获取CSS解析后的精确值复杂变换处理CSS变换后的实际渲染尺寸特殊场景：隐藏元素需要临时显示，盒子模型需要特殊处理在实际开发中，选择合适的方法需要考虑性能影响、是否需要实时数据以及具体的布局需求。现代浏览器提供的API为响应式尺寸监听提供了更高效的解决方案，值得在新项目中优先考虑。理解这些方法背后的原理和差异，将帮助开发者编写出更高效、更健壮的前端代码，应对各种复杂的布局挑战。
js获取精确宽度/高度(带小数位的像素)
tangdou5682的博客
09-03 2230
原文链接：https://blog.csdn.net/zy1281539626/article/details/78488062 问题：1、用jquery获取div等块级元素的宽高时不能精确获取，只能得到整数部分像素，不能获取小数位px。 2、按750开发， iPhone 8 plus 渲染元素后实际宽高会有小数点，clientHeight，只能得到整数部分像素 请看下面事故： <!DOCT...
js 中style.height和offsetHeight比较
热门推荐
Yelbosh的专栏
12-19 1万+
看到蓝色经典论坛的一个讨论帖子： http://bbs.blueidea.com/thread-3072537-1-1.html 从两个人的争论中，更加深入的了解了style.height和offsetHeight的区别 style.height： 只能在div在行内样式设置了height才能获取到 例如：height  do
HTML中设置属性时写px和不写的区别
m0_51700376的博客
09-29 1218
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>样式区别</title> <style type="text/css"> #box{ width: 400px; height: 400px; border: 2px red solid; } #box1{ width: 100px;
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
10-30
然而，在实际应用过程中，开发者可能会遇到一个常见的问题：使用JavaScript的`element.style`属性来获取或修改某个DOM元素的样式时，有时候却无法得到预期的结果。本文将详细探讨这一现象背后的原因，并提供相应的...
用javascript获得css中的属性值的代码
10-30
在 Web 开发中，获取 CSS 属性值是一项非常重要的任务，因为它可以帮助我们更好地控制网页的样式和布局。JavaScript 提供了多种方法来获取 CSS 属性值，本文将介绍其中的一些。 首先，让我们来看一个简单的示例代码...
CSS_round.rar_javascript_圆角
09-24
虽然CSS3的`border-radius`已经足够强大，但在某些特定情况下，如动态改变圆角大小或者老版本浏览器的支持问题时，我们可能需要借助JavaScript。例如，可以使用JavaScript库如jQuery来操作元素的样式： ```...
JS+style实现动态设置图片高宽
仗见天涯...
06-12 8812
function resizeIMG(){var objImg = document.getElementById("pictureID");//pictureID是图片ID号var img_w = objImg.width;var img_h = objImg.height;var w=parseInt(img_w);var h=parseInt(img_h);//默认图片最宽400
HTML学习笔记——img属性width/height和style中width/height的区别
Jane的博客
12-20 1579
参考：https://blog.csdn.net/weixin_34354173/article/details/91382744 <img>属性width与height 作用：在页面加载时为图像预留空间，以免图片加载时，页面布局会发生变化。 属性值：pixels——以像素为单位，如 height=“100”。 使用技巧： 无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，
js修改元素样式
dd的博客
03-17 5253
–3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等。|–x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)： 获取指定字符；如返回-1，x则不在数组中。|–parentNode.insertBefore()(新元素对象，A)–其中A为新元素要插入位置的后一位元素。|–x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字。
用javascript控制css中style.height和style.width时应注意px单位问题
飞翔的熊blabla
10-22 3470
JavaScript在ie中解析时，可以这样写： 1、document.getElementById('div').style.height=100;    //这样写以IE里会正确执行，把ID为div元素高改为100象素。 2、但是读的时候，alert(document.getElementById('div').style.height+10);    //这样将会出错，因为读取s
img 属性(width height)和style(width height)区别
weixin_34354173的博客
11-05 5904
属性width height 定义：在页面加载时为图像预留空间，以免图片加载时，页面布局会发生变化。 属性值：pixels(以像素为单位的高度或宽度值) percent(以包含元素的百分比计的高度或宽度值) 使用技巧： 隐藏特性：无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。 使用这种方...
CSS 操作 - width() 方法
爱吃鱼油
09-23 424
$(document).ready(function(){ $(".btn1").click(function(){ $("span").text($("p").width()); }); }); 本段落的宽度是 unknown px。 获得宽度 计算出span的宽度：
canvas width height 和 style width height细节总结
pgLi
04-09 688
1、canvas width height 和 style width height的区别 width height是画布的宽高，也是可绘制区域的宽高，不设置的话默认是300 150； style width height是这个元素的宽高，一旦不一致时，canvas图形会放大或者缩小，可以用这个现象来处理canvas毛边问题。 ...
JS之style.width(height)与offsetWidth(Height)的区别
沙漠皇帝本拉登
03-15 1834
JS中style.width(style.height)与offsetWidth(offsetHeight)的区别 1: 当样式写在行内的时候,比如&lt;div class="item" style="width:100px"&gt;&lt;/div&gt; 这时,在js中用style.width与offsetWidth都可以获取到该宽度值 比如代码 &lt;head&gt; ...
JavaScript中的style.width/height和offsetWidth/height区别
fisher
09-14 648
关于style.width/height和offsetWidth/height，他们都可以返回对象的宽度，但是两者又有很大的区别。 总结： 1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offset
parsesize：将CSS size属性智能分解为width和height
标题描述了一个CSS预处理器的功能，即它可以解析并转换CSS中的`size`属性为`width`和`height`属性。这表明该预处理器主要面向简化和自动化CSS编码过程，尤其是属性映射部分。使用预处理器能够减少手动编写常见属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值