<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>获取css样式</title>

 </head>

 <style>

     #box{

         position: absolute;

         left: 50%;

         top: 100px;

         background-color: #fff000;

         color: blueviolet;

         font-size: 2em;

         font-weight: bolder;

         text-align: center;

         width: 300px;

         height: 100px;

         line-height: 100px;

         font-style: italic;

     }

 </style>

 <body>

     <div id="box">ProsperLee</div>

     <pre>

         #box{

             position: absolute;

             left: 50%;

             top: 100px;

             background-color: #fff000;

             color: blueviolet;

             font-size: 2em;

             font-weight: bolder;

             text-align: center;

             width: 300px;

             height: 100px;

             line-height: 100px;

             font-style: italic;

         }

     </pre>

     <script>

         /**

          * 获取css样式

          * ele 元素

          * prop 属性名

          **/

         function getStyle(ele, prop) {

             if (window.getComputedStyle) {

                 return window.getComputedStyle(ele, null)[prop];

             } else {

                 return ele.currentStyle[prop];

             }

         }

         var el = document.getElementById('box');

         console.log('position：' + getStyle(el,'position')); // absolute

         console.log('left：' + getStyle(el,'left')); // 488.5px

         console.log('font-size：' + getStyle(el,'font-size')); // 32px

         console.log('font-style：' + getStyle(el,'font-style')); // italic

         console.log('max-width：' + getStyle(el,'max-width')); // none

         console.log('bottom：' + getStyle(el,'bottom')); // 532px

     </script>

 </body>

 </html>

获取元素CSS样式的更多相关文章

  1. （转载）记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

  3. 转贴：获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  4. 获取元素计算样式getComputedStyle（）与currentStyle

    window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...

  5. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

  6. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  7. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  8. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  9. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

  1. redis测试实践

    最近测试服务端的时候,接触到了redis,之前也看过,但不系统,借着这次实践,记录一下. 一.写在前面 Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的 ...

  2. 『取巧』VS2015试用期过后 继续试用

    背景: 个人电脑 安装的 VS2015 Community 社区版. 一直用得挺好,都忘了要登录. 直到近来,30天试用期过 —— VS弹窗:要登录用户名.密码 才能继续使用. 但是,输入了无数次 邮 ...

  3. 安全性测试：OWASP ZAP使用入门指南

    免责声明: 本文意在讨论使用工具来应对软件研发领域中,日益增长的安全性质量测试需求.本文涉及到的工具不可被用于攻击目的. 1. 安全性测试 前些天,一则12306用户账号泄露的新闻迅速发酵,引起了购票 ...

  4. 5.1基于JWT的认证和授权「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,码字辛苦,如果你吃了蛋觉得味道不错,希望点个赞,谢谢关注. Cookie-Based认证 认证流程 我们先看下传统Web端的认 ...

  5. 玩转Spring Cloud之服务注册发现（eureka）及负载均衡消费（ribbon、feign）

    如果说用Spring Boot+Spring MVC是开发单体应用(或单体服务)的利器,那么Spring Boot+Spring MVC+Spring Cloud将是开发分布式应用(快速构建微服务)的 ...

  6. DSAPI 生成桌面图标（带数字）

    功能:在桌面上创建一个带有指定数字的图标. 效果图: 生成的ICO图标 代码 Private Sub 生成桌面图标(消息数量 As Integer) Try Dim B As New Bitmap(M ...

  7. mybatis一对一 和 一对多 嵌套查询

    实际项目中的,接口对外VO  会出现 一对一 和 一对多的情况,举例:小区 下面有 楼栋  ,楼栋 下面有 房屋    ,   房屋里面又房间 小区Vo  : districtVo { id: nam ...

  8. ArcPy 将mxd格式转换为msd格式

    在控制程序进行地图服务更新时,如果只是修改MXD中的渲染是不行的,需要写脚本将MXD转换为MSD,替换原有的MSD文件,并重新启动地图服务,这样才能读取到新的渲染方式. 附上Python代码: # - ...

  9. oracle如何查看当前有哪些用户连接到数据库

    可以执行以下语句:select username,serial#, sid from v$session; ---查询用户会话alter system kill session 'serial#, s ...

  10. 批量数据复制SqlBulkCopy使用经验点滴（特别是超时处理）

    如果要批量复制大量的数据,用ado.net或者其他orm框架逐条读取并写入,有时会耗时太长,满足不了要求,此时SqlBulkCopy就可以出来大显身手了,相信许多人了解或使用过它. 但实际使用时,还是 ...