获取样式currentstyle(),getComputedStyle()

最新推荐文章于 2019-11-22 13:49:48 发布
原创 最新推荐文章于 2019-11-22 13:49:48 发布 · 269 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在前端开发中如何使用不同的方法来获取HTML元素的样式。包括行内样式的直接读取，以及通过currentStyle()和getComputedStyle()等方法获取元素的实际显示样式。这些方法对于动态调整页面布局和实现复杂效果非常有用。

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

odiv.style.width;

其中的style只能获取行间样式

<div style="width:500px"></div>//行间样式
currentstyle()//只能在IE里面用

getComputedStyle()//只能在FF里用,第一个参数odiv，第二个参数没用随便填

getComputedStyle与currentStyle获取样式(style/class)
12-12
DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是事情还没完，万恶的IE不支持此方法，它有自己的一个实现...
前端学习笔记style，currentStyle，getComputedStyle的用法与区别
09-02
总的来说，`style`用于直接操作内联样式，`currentStyle`是IE浏览器获取元素综合样式的方法，而`getComputedStyle`是非IE浏览器获取元素所有应用样式的方法。了解这些区别对于前端开发者来说，能更有效地处理样式...
用currentstyle为当前栏目增加一些样式
工作札记
12-01 1187
有两种方法，比较传统的方法是： {dede:channel type='self' currentstyle="<li class='thisclass'><a href='~typelink~'><span>~typename~</span></a></li>"} <li><a href='[field:typeurl/]'><span>[field:typename/]</span></a></
JavaScript之Style对象与CurrentStyle对象
热门推荐
笺赕
07-18 2万+
1、Style对象 style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。 例子： &lt;style type="text/css"&gt;#div{color:gray;}&lt;/div&gt;//内部样式 &lt;div id="div" style="color:red;"&gt;&l
封装getStyle （获取样式currentStyle getComputedStyle兼容处理）
weixin_33805743的博客
03-06 151
<script type="text/javascript">//哪个元素//哪个样式 function getStyle(obj, attr){if(obj.currentStyle)//在火狐中为alert(obj.currenStyle)为undefined是假 假的话就会执行else中{return obj.currentStyle[attr];//ie支持}el...
获取样式 currentStyle与getComputedStyle
erdouzhang
07-27 484
currentStyle与getComputedStyle 都是获取样式； currentStyle（）兼容IE6、7、8 getComputedStyle（）不兼容IE6、7、8 getComputedStyle得到的是计算机（浏览器）经过计算后的样式：如果同时有行内样式和样式表，那么优先选择行内式；如果js中也设置样式，那么优先选择js中的样式； 下面的例子是获取一个盒子的宽度： h
元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect
weixin_30326741的博客
01-02 298
1、示例代码 （1）html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js获取宽度</title> <style type="text/css"> ...
getComputedStyle和currentStyle的区别和用法
fortune丶的blog
11-22 771
获取元素CSS值之getComputedStyle方法熟悉 一、碎碎念~前言 我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创...
currentStyle、getComputedStyle 获取样式
07-12 145
style.height 获取的是行间的样式 currentStyle.height、getComputedStyle(elem,null).height获取的是 div 的 content 的宽高， clientHeight 获取的是 content+padding， offsetHeight 获取的是content+padding+border。 <script&...
JS——getComputedStyle与currentStyle获取样式
weixin_30341735的博客
04-16 172
转载自：https://segmentfault.com/a/1190000007477785 CSS的样式分为三类： 内嵌样式：是写在标签里面的，内嵌样式只对所在的标签有效内部样式：是写在HTML里面的，内部样式只对所在的网页有效外部样式表：如果很多网页需要用到同样的样式，将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件 ...
获取元素样式 currentStyle 和 getcomputedStyle
weixin_30641465的博客
05-25 119
场景 你要获取某一元素的样式，可是没有获取到，返回的值为undefined，可是有时候又能成功？ 为什么？ 因为，xx.stly.xxx 可以获取的样式信息，是dom元素style属性里的样式，对于通过<style>标签，或外部样式表定义的，我们就无法获取了。当然，js给予的也是dom。 怎么办？ dom标准里有个全局方法 getComputedStyle 。可以获...
JS获取元素样式之style、currentStyle、getComputedStyle
安歌
09-07 4337
在js中获取元素的样式属性大多都是用ele.style.attr这种方式，但是这种方式是有局限性的，该方法只能获取到行内样式，获取不了外部样式。 如果要想获取元素的外部样式，可以选用currentStyle属性和getComputedStyle属性，但这两个属性不能设置样式,只能获取样式，而且这两个属性有其兼容性，具体来说： currentStyle属性 用法：ele.currentStyl...
JS获取CSS样式（style/getComputedStyle/currentStyle）
11-23
对于JavaScript获取样式： 1. **`element.style`**：此属性返回一个CSS样式对象，仅包含元素的内嵌样式。如果元素没有内嵌样式，返回的是一个空对象。例如： ```javascript var tag = document.getElementById(...
电赛历年试题&经验分享.7z
08-12
电赛历年试题&经验分享.7z
PLC立体车库智能仿真系统：基于博途V15的西门子1200PLC控制与触摸屏操作 - PLC编程 v1.5
08-12
基于博途V15软件平台构建的3×2立体车库智能仿真系统。该系统采用西门子1200PLC进行控制，配备触摸屏操作界面，实现了自动出入库、电梯式小车移动以及变频器输出等功能。文中展示了详细的程序注释和模块化编程方法，如使用TON定时器实现载车板升降的速度控制，利用FC块封装车辆检测模块，通过GRAPH语言编写自动出入库逻辑等。此外，还提到了系统的IO表设计和故障处理机制，以及未来可能加入AI算法进行智能车位分配的设想。 适合人群：对PLC编程、工业自动化控制系统感兴趣的工程师和技术爱好者。 使用场景及目标：适用于学习和研究PLC编程技巧、工业自动化控制系统的仿真开发，帮助理解和掌握PLC控制逻辑、触摸屏交互设计、变频器仿真等关键技术。 其他说明：该项目不仅提供了完整的源代码和详细的注释，还能在博途PLCSIM Advanced环境中进行全仿真测试，为实际工程应用提供宝贵的经验和参考。
LuWu-陆吾，一个简单的无代码深度学习平台
08-12
资源下载链接为： https://pan.quark.cn/s/2f73b93e37c3 LuWu——陆吾，一个简单的无代码深度学习平台。（最新、最全版本！打开链接下载即可用！）
Python自动化测试框架pytest入门与实战.doc
08-12
Python自动化测试框架pytest入门与实战.doc
统计学习,机器学习,神经网络,深度学习,使用matlab实现
08-12
资源下载链接为： https://pan.quark.cn/s/6c421a94aa8d 统计学习,机器学习,神经网络,深度学习,使用matlab实现.（最新、最全版本！打开链接下载即可用！）
基于springboot的物流管理平台设计与实现.docx
最新发布
08-12
基于springboot的物流管理平台设计与实现
JavaScript获取非行间样式：currentStyle与getComputedStyle技巧
总结：获取非行间样式的关键在于使用`getComputedStyle()`函数，这是一个强大的工具，可以提供跨浏览器的样式获取。同时，为了保持代码的健壮性，我们需要进行浏览器兼容性检查，以便在不同环境中正确地处理样式获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值