<!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. jdk源码阅读笔记-HashSet

    通过阅读源码发现,HashSet底层的实现源码其实就是调用HashMap的方法实现的,所以如果你阅读过HashMap或对HashMap比较熟悉的话,那么阅读HashSet就很轻松,也很容易理解了.我之 ...

  2. .NET Core使用Quartz执行调度任务进阶

    一.前言运用场景 Quartz.Net是一个强大.开源.轻量的作业调度框架,在平时的项目开发当中也会时不时的需要运用到定时调度方面的功能,例如每日凌晨需要统计前一天的数据,又或者每月初需要统计上月的数 ...

  3. Aria2序之导言

    aria2是什么,如果此时此刻你看到标题读到第一行正在思索着一个问题,很抱歉 ,这篇以及后续我的blog不适合你,请移步. 我在aria2的官方站点抄袭了如下语句用来充实本文: aria2 is a  ...

  4. TCP的三次握手与四次挥手

    TCP的三次握手与四次挥手 一.TCP(Transmission Control Protocol 传输控制协议) TCP是面向对连接,可靠的进程到进程通信的协议 TCP是提供全双工服务,即数据可在同 ...

  5. python查询修改配置文件功能

    阅读目录 一.python查询功能代码 1.查询修改配置文件 global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 i ...

  6. 神奇的选择器 :focus-within

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能. 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有个错误有必要每次讲到伪类都提一下,有时你会发 ...

  7. 关于.Net mvc 项目在本地vs运行响应时间过长无法访问时，解决方法！

    最近可能是刚升级了电脑使用了window10操作系统,总是遇到了一些以前没有遇到过的事情! 今早来到公司本来准备写bug的,但是当我打开vs运行的时候发现今天的电脑响应的时间明显的要比之前打开网页调试 ...

  8. 爬虫框架之Scrapy（二）

    递归解析 糗事百科递归解析 在前面的例子里只是爬取了糗事百科热门的第一个页面,但是当我们需要爬取更多的页面时,需要对每个页面的url依次发起请求,然后通过解析的方法进行作者和标题的解析. 我们可以构建 ...

  9. 剑指Spring源码（二）

    这是春节后的第一篇博客,我在构思这篇博客的时候,一度想放弃,想想要不要换个东西写,因为毕竟个人水平有限,Spring源码实在博大精深,不是我这个菜的抠脚的菜鸡可以驾驭的,怕误人子弟,还有就是源码分析类 ...

  10. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...