<!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. 中国.NET：各地微软技术俱乐部汇总(持续更新中...)

    中国.NET:各地微软技术俱乐部汇总(持续更新中...)   本文是转载文,源地址: https://www.cnblogs.com/panchun/p/JLBList.html by ​史记微软. ...

  2. 第5章 令牌自省端点(Token Introspection Endpoint) - IdentityModel 中文文档(v1.0.0)

    OAuth 2.0令牌自省的客户端库是作为HttpClient扩展方法提供的. 以下代码将引用令牌发送到内省端点: var client = new HttpClient(); var respons ...

  3. C# .NET Web API 如何自訂 ModelBinder

    各位好!這次要來替大家介紹的是如何在 .NET  Web API 中自訂一個 ModelBinder 透過自定義的 ModelBinder 我們可以很簡單的將 QueryString 傳過來的參數綁定 ...

  4. Java并发——volatile关键字

    什么是内存可见性? 这里就要提一下JMM(Java内存模型).当线程在运行的时候,并不是直接直接修改电脑主内存中的变量的值.线程间通讯也不是直接把一个线程的变量的值传给另一个线程,让其刷新变量.下面是 ...

  5. 什么是移动BI

    移动商务智能(移动商务智能或移动智能)定义为一个包含技术和组织元素的系统,可向用户提供历史和/或实时信息,以便在智能手机和平板电脑等移动设备上进行分析笔记本电脑),以实现有效的决策和管理支持,以提高公 ...

  6. 【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(1)！

    前言- 上几篇文章,我们一个一个的研究了Cubism官方提供的Android使用Live2D的简单例子,但是依旧和大家平时见到的还是有很大差距的.在研究了代码差不多一周以后,我决定还是用文字的形式记录 ...

  7. SQL内模糊查询语句拼接时单引号'问题

    下面以存储过程查询所有为例,非存储过程(或不是查询所有将*替换为你想要查询的列即可)更为简单, 语法:select * from 表名 where 列名like'%条件%' 拼接后的set @变量名 ...

  8. sql sever insert into混合嵌套插入

    如果你想插入的字段取值方式不同,既有自己设定的值,又想插入某个表中的某个字段数据,下面就举例说明 insert into Meters(metertypeid, meternumber, consta ...

  9. windows根据端口号杀进程

    有时候eclipse会被卡死, 结束进程后重新启动项目会出现端口已经被占用 这时候需要杀掉进程 1, cmd打开dos窗口 2, netstat -ano | findstr "端口号&qu ...

  10. 群晖NAS再折腾

    端口转发 两年前我买了一台双盘位的群晖NAS,配置两个4T的硬盘,这玩意儿一度改变了我使用电脑的模式,真是爽爆了!最最主要的功能就是我能用它规整我所有的资料,并且不管何时何地,只要有网就能访问.为了能 ...