用javascript控制css中style.height和style.width时应注意px单位问题

最新推荐文章于 2025-07-08 16:39:40 发布
最新推荐文章于 2025-07-08 16:39:40 发布
阅读量3.4k 收藏
点赞数
分类专栏： html+js+jquery+css
本文探讨了使用JavaScript控制CSS属性如高度和宽度时，在不同浏览器（如IE和Firefox）间的兼容性问题，并提供了解决方案。

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

divSlider.style.height = 1000; //在chrome不管用
divSlider.style.height = "500px"; //这样就好了


JavaScript在ie中解析时，可以这样写：

1、document.getElementById('div').style.height=100;    //这样写以IE里会正确执行，把ID为div元素高改为100象素。

2、但是读的时候，alert(document.getElementById('div').style.height+10);    //这样将会出错，因为读取style.height的时候，会以"100px"的形式出现。

3、到了FF里，不光读出来的是"100px"，写的时候，也必须是document. getElementById('div').style.height='100px';这样才能有效果。。。也许正是FF的严谨吧。

OK，这样好搞多了，以后用javascript控制css的对象高度或者宽度的时候，我们就直接用parseInt($('div').style.height)这样就完美了，无论读写，IE或者FF，都兼容了。。。。

 

原作地址：http://hi.baidu.com/loadinger/blog/item/beceab8b24191e7c9f2fb4c6.html

JS之style.width(height)与offsetWidth(Height)的区别
沙漠皇帝本拉登
03-15 1834
JS中style.width(style.height)与offsetWidth(offsetHeight)的区别 1: 当样式写在行内的时候,比如<div class="item" style="width:100px"></div> 这时,在js中用style.width与offsetWidth都可以获取到该宽度值 比如代码 <head> ...
JS 中的 style.width
qsfwy的专栏
09-01 646
JS 中的 style.width 2009-08-28 16:49 JS 中也可以控制样式表，但 IE 和 FF(FireFix) 对此解释略有不同，以 style.width 为例。 IEid.style.width = "100"; //只带数值，不会出错id.style.width = "100px"; //带数值和单位，不会出错id.style.width = "100p...
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
canvas的width和height 与 style 里面的 width和height有什么区别
最新发布
qq_42267338的博客
07-08 272
HTML中Canvas元素的width/height属性与CSS样式中的width/height有本质区别：HTML属性设置画布的实际像素分辨率（如width="500"创建500像素宽的绘图网格），直接影响坐标系和像素数量，修改会清空画布内容；而CSS样式仅控制画布在页面中的显示尺寸（如width:300px），通过缩放现有像素来调整视觉大小，不会重置画布内容。关键差异在于HTML属性定义真实分辨率，CSS样式只影响显示效果，不当使用CSS缩放可能导致像素失真。
【js】设置和获取属性，style的width，left
Tuling2020的博客
10-18 925
https://segmentfault.com/q/1010000011443036?sort=created $('.progress_btn').css('left', left); //滑块位置$('.progress_barnav').animate({width: left}, 187); //滑块到左端的颜色$("#progressHi...
JS DOM.style.height 取不到的情况 为空的情况
银贝斯的专栏
10-10 9646
#hell{ display: inline-block; background:red; width:100px; height:100px; border:1px solid yellow; } var a = document.getElementById("hell").style.width; conso
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
10-30
然而，在实际应用过程中，开发者可能会遇到一个常见的问题：使用JavaScript的`element.style`属性来获取或修改某个DOM元素的样式时，有时候却无法得到预期的结果。本文将详细探讨这一现象背后的原因，并提供相应的...
基于js中style.width与offsetWidth的区别(详解).docx
01-22
如果只需要获取元素的内容宽度，并且希望能够在JavaScript中动态设置该宽度，则应使用`style.width`；如果需要获取元素的整体宽度（包括内容、填充和边框），则应该使用`offsetWidth`。理解这些属性的不同之处对于...
JavaScript CSS Style属性对照表
09-25
在网页开发中，JavaScript 和 CSS 是两种非常重要的技术，它们共同负责页面的动态效果和视觉呈现。JavaScript 可以通过操作 DOM（文档对象模型）来动态改变元素的 CSS 样式，从而实现交互性。本篇文章将详细讲解如何...
CSS_round.rar_javascript_圆角
09-24
"CSS_round.rar_javascript_圆角"这个压缩包文件显然包含了关于如何使用CSS和JavaScript来创建圆角边框的资源。这里我们将详细探讨这两种技术以及它们在创建圆角边框中的应用。 首先，我们从CSS（层叠样式表）开始...
用javascript获得css中的属性值的代码
10-30
在 Web 开发中，获取 CSS 属性值是一项非常重要的任务，因为它可以帮助我们更好地控制网页的样式和布局。JavaScript 提供了多种方法来获取 CSS 属性值，本文将介绍其中的一些。 首先，让我们来看一个简单的示例代码...
浅谈style.height、clientHeight、offsetHeight、scrollHeight
weixin_30416497的博客
01-17 297
先分别介绍以下，以下资料来自MDN HTMLElement.offsetHeight是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 Element.clientHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 Element.scrollHeight是一个只读属性，是一个元素内容高度的...
style.height和style.width等等的赋值方式(IE/FF/Chrome/Opera/Safari)
kiino‘s Blog
07-17 879
利用JavaScript给某个元素的高度style.height和宽度style.width赋值(或margin、padding)，应当采用规范的方式。 许多朋友在IE下测试网页，例如： document.getElementById(”div1″).style.height=100;发现赋值成功，然而火狐(FF)却不生效，为何？   因为规范的赋值方式应该是带单位的：document.g...
【JS Web 前端知识库】19.说一说CSS尺寸设置的单位
LIU_CAN的博客
02-02 298
说一说CSS尺寸设置的单位
element-ui设置高度height属性与style属性设置的区别
菜鸡的博客
05-08 4040
element-ui设置高度height属性与style属性设置的区别
CSS（CSS3）知识点学习
于公子的博客
03-03 8744
CSS（CSS3）自我学习，知识点总结
JavaScript-Dom入门-style.high 、offectHigh、clientHigh、scrollHigh的区分
lemon_yu的博客
04-05 441
更多的width和height说明 盒模型是css的一个重要概念，在开始前我们先复习一下盒模型的height和width 影响盒子大小的属性有四个，以高度为例自内向外有： 元素高度：high 内边距：padding 边框宽度：border 外边距：margin 在之前我们学习了element.style对于宽和高的操作 style.height 修改元素的高 style.width 修改...
某 clientHeight, style.height, offsetHeight, srcollHeight
hanyuxinting的专栏
06-10 734
  style.height：包括 元素的滚动条,不包括边框clientHeight：不包括元素的滚动条和边框offsetHeight：包括元素的滚动条和边框scrollHeight ：offsetHeight+scrollTop 公式是:style.height=clientHeight+滚动条宽度;offsetHeight=style.height+bo
div标签常用属性
热门推荐
Hello World!
06-20 3万+
div标签所有属性 color : #999999 文字颜色  font-family : 宋体 文字字型  font-size : 10pt 文字大小  font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weigh
clientheight与style.height
04-28
### clientHeight 与 style.height 的区别及用法 #### 定义与特性 `clientHeight` 是一个只读属性，表示元素的内容高度（以像素为单位），包括内边距（padding），但不包括外边距（margin）、边框（border）、滚动条以及任何可能存在的伪元素的高度[^2]。 而 `style.height` 则是一个可读写属性，用于访问或修改通过 CSS 设置的 `height` 属性值。它返回的是字符串形式的高度值，并带有单位（如 `"100px"` 或 `"auto"`）。如果未显式定义 `height`，则会返回空字符串。 #### 使用场景 当需要测量 DOM 元素的实际渲染大小时，通常使用 `clientHeight`，因为它反映了浏览器计算后的实际尺寸。例如，在动态调整布局或者检测溢出内容时非常有用。另一方面，`style.height` 更适合于操作样式表中的具体数值，比如动画效果、初始化组件大小等场合。 以下是两者的对比表格： | 特性 | clientHeight | style.height | |-------------------|--------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | **描述** | 返回元素内部可见区域的高度（含 padding 不含 border 和 scrollbar） | 获取/设置指定对象当前应用的CSS height属性 | | **类型** | 只读整数型 (pixels) | 字符串型 ("length" or "%") | | **默认行为** | 如果没有设定 explicit heights，则基于 content 自动决定 | 若无 inline styles 中定义 height ，则返回 "" | #### 示例代码 下面提供了一段简单的 HTML 和 JavaScript 来演示两者之间的差异: ```html <div id="exampleDiv" style="width: 200px; height: 150px; padding: 20px; border: 5px solid black;"> Some text inside the div. </div> <script> const exampleDiv = document.getElementById('exampleDiv'); console.log(`Style Height: ${exampleDiv.style.height}`); // 输出 Style Height: 150px console.log(`Client Height: ${exampleDiv.clientHeight}px`); // 输出 Client Height: 190px // 计算了 inner content area + top/bottom paddings but without borders and scrollbars </script> ``` 在这个例子中可以看到即使设置了相同的外部尺寸规格，由于存在额外的填充(padding)，所以客户端报告出来的高度要比单纯由样式控制的大一些。 ### 结论 综上所述，虽然二者都涉及到元素的高度概念，但在用途上有明显不同之处。开发者应根据实际情况选择合适的方法来满足特定需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值