<!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. Netty源码—六、tiny、small内存分配

    tiny内存分配 tiny内存分配流程: 如果申请的是tiny类型,会先从tiny缓存中尝试分配,如果缓存分配成功则返回 否则从tinySubpagePools中尝试分配 如果上面没有分配成功则使用a ...

  2. cesium 之地图贴地量算工具效果篇（附源码下载）

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  3. C:\Program Files\Java\jdk1.7.0_79\bin\java.exe'' finished with non-zero exit value 1

    转载请标明出处:https://www.cnblogs.com/tangZH/p/10538982.html 今天,在项目过程中碰到了这个奇怪的问题,C:\Program Files\Java\jdk ...

  4. 使用d3.v5实现折线图与面积图

    d3最新是V5版的,比起V2的API变动了不少,写下我实现过程 效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en&qu ...

  5. Git来操作GitHub~

    设置用户名(设置一次 以后就不用再设置了) git config --global user.name 'taopanfeng' 设置邮箱(设置一次 以后就不用再设置了) git config --g ...

  6. WPF软件开发系统之三——自助购票取票、自助选座系统

    本系统使用.Net WPF开发,运行于Windows操作系统,电脑或者触摸屏设备(包括竖屏). 本系统开发背景:景点.影院.或商场的自助购票.取票系统. 图书馆.自习室的选座.占座系统. 功能包括:选 ...

  7. .NET Core 时代已经到了，你准备好了吗

    今天很多人都收到了阿里云函数计算支持.NET Core的短信了. 通过访问 https://help.aliyun.com/document_detail/112379.html 你可以看到最新的说明 ...

  8. ThinkPHP5.1 + tufanbarisyildirim 解析apk

    摘要 对于apk,我可以说只会安装,并不知道其中有什么内容需要记录下来.这次公司做一个关于电视机顶盒的项目.对于这个陌生的项目,刚开始真是一脸懵逼,完全不知道如何下手. 因为这类的项目完全没有接触过, ...

  9. 字典fromkeys方法和update方法

    #Author : Kelvin #Date : 2019/1/17 15:27 #字典的update方法,是向调用者字典中添加另外一个字典 dict1 = {"name":&qu ...

  10. DotNetCore跨平台~为debain系统添加阿里云加速

    回到目录 直接把它阿里云的镜像覆盖到原来的/etc/apt/sources.list文件 cat > /etc/apt/sources.list << EOF deb http:// ...