<!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. 很详细的Django入门详解

    Django 是用Python开发的一个免费开源的Web框架,可以用于快速搭建高性能,优雅的网站!采用了MVC的框架模式,即模型M,视图V和控制器C,也可以称为MVT模式,模型M,视图V,模板T.在学 ...

  2. 图解 sql 事务隔离级别

    sql 事务隔离级别有四种分种为: 一 Read Uncpommitted(未提交读) 二 Read Committed(提交读) 三 Repeated Read(可重复读) 四 Serializab ...

  3. 六大设计原则（二）LSP里氏替换原则

    里氏替换原则LSP(Liskov Subsituation Principle) 里氏替换原则定义 所有父类出现的地方可以使用子类替换并不会出现错误或异常,但是反之子类出现的地方不一定能用父类替换. ...

  4. github 进阶说明

    目录 github 进阶说明 前言 三个目录树 重置 git reset 增加路径的reset 检出 checkout 带路径的checkout 仓库 数据对象 其他 资料 github 进阶说明 前 ...

  5. Active Directory 域服务安装与测试

    Active Directory 域服务安装与测试 实验原理: 安装域服务并创建用户,把另一个电脑加入域中,然后用域账户登录以及用本地账户登录测试 实验条件:windows server 2008(域 ...

  6. Windows To Go入坑记录

    什么是Windows To Go? https://en.wikipedia.org/wiki/Windows_To_Go 微软为了解决企业用户的需求而推出,可以在u盘或者移动硬盘启动window系统 ...

  7. 使用Chrome 中的 ssh 插件登陆 linux 服务器

    . 在chrome 商店中搜索 secure shell , 安装 Secure Shell Extension 2. 安装完成后,就可以在应用程式中找到Secure Shell App 3.点击 S ...

  8. 你在为谁工作——IT帮深圳分站2019年3月线下活动回顾

    对于工作,在每个人的心中,它所占的份量都是不一样的.有的人活着是为了工作,有的人工作是为了更好的生活. 在3月24日下午,北京.上海与深圳三地我们同步举办了关于工作这个话题的沙龙活动. 我们深圳分站参 ...

  9. 小白学习Python之路---开发环境的搭建

    本节内容 1.Python的介绍 2.发展史 3.安装Python 4.搭建开发环境 5.Hello World程序 一.Python的介绍 Python的创始人为荷兰人吉多·范罗苏姆(Guido v ...

  10. AI - TensorFlow - 可视化工具TensorBoard

    TensorBoard TensorFlow自带的可视化工具,能够以直观的流程图的方式,清楚展示出整个神经网络的结构和框架,便于理解模型和发现问题. 可视化学习:https://www.tensorf ...