获取计算后的样式属性----获取一个元素任意一个样式属性值

获取元素距离左边位置的值

会有如下兼容性问题:
    my$("btn").onclick = function () {
//获取元素距离左边位置的值
console.log(my$("dv").offsetLeft); //谷歌,火狐支持
//console.log(window.getComputedStyle(my$("dv"),null).left);
//console.log(window.getComputedStyle(my$("dv"),null)["left"]); //IE8支持
//console.log(my$("dv").currentStyle.left);
};

获取任意一个元素的任意一个样式属性的值

因此封装一个兼容函数,判断浏览器是否支持再返回

//获取任意一个元素的任意一个样式属性的值
  function getStyle(element, attr) {
//判断浏览器是否支持这个方法
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

测试:

    //测试
my$("btn").onclick = function () {
console.log(getStyle(my$("dv"), "top"));
};

JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数的更多相关文章

  1. JS获取元素计算过后的样式

    获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...

  2. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  3. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

  4. 前端笔记之JavaScript(八)关于元素&计算后的样式

    一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...

  5. javascript中封装获取样式属性值的兼容方法

    function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, nu ...

  6. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

  7. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

  8. JS获取对象在内存中计算后的样式

    通过obj.style的方式只能取得"内联style"的值,对于<style></style>中的css属性值,则无能为力 . 我们可以用obj.curre ...

  9. js获取计算后的样式表

    在编写html时,使用dom对象的style属性可以获取标签里的style属性,但是不能获取单独css样式文件或者style标签的属性值 <div style="width:10px& ...

随机推荐

  1. 【NHOI2018】找素数

    [题目描述] 素数又称质数,是指一个大于 1 的正整数,如果除了 1 和它本身以外,不能再被其它的数整除,例如:2.3.5.97 等都是素数.2 是最小的素数. 现在,给你 n 个数字,请你从中选取一 ...

  2. 利用scrapy爬取腾讯的招聘信息

    利用scrapy框架抓取腾讯的招聘信息,爬取地址为:https://hr.tencent.com/position.php 抓取字段包括:招聘岗位,人数,工作地点,发布时间,及具体的工作要求和工作任务 ...

  3. python 2.x 中print >> sys.out ,print 与sys.out.write()的关系

    print 会调用 sys.stdout 的 write 方法 以下两行在事实上等价: sys.stdout.write('hello,python'+'\n') print 'hello,pytho ...

  4. jenkins + maven + nexus + [ svn 或 GitLab 或 GitHub ]

    目录 介绍 DevOps平台四大模块 针对DevOps开源项目 Jenkins 介绍 Maven 介绍 maven的核心概念介绍 SVN介绍 Nexus介绍 Maven私服的 个特性: 流程图 环境搭 ...

  5. jenkins 如何让job对应一个节点

    1.配置job:如图,在label expression 里面填写[节点标签名]或者是[节点名称]. 2.配置节点: 3.构建:第一个红线,表明使用哪个节点进行构建.  第二个红线,表明工作目录.

  6. 《吊打面试官》系列-HashMap

    你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 上已经收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Sta ...

  7. ASP.NET Core 选项模式源码学习Options IOptions(二)

    前言 上一篇文章介绍IOptions的注册,本章我们继续往下看 IOptions IOptions是一个接口里面只有一个Values属性,该接口通过OptionsManager实现 public in ...

  8. 3D硬件加速提升动画性能 与 z-index属性

    目录 1. chrome Layer borders 2. 层创建标准 3. 例子 总结 1. chrome Layer borders <WebKit技术内幕>第二章介绍了网页的结构,其 ...

  9. JS的引入方式_变量的使用_变量的类型

    JS的俩种引入方式: 1. <!--js的引入方式1--> <script> /*网页中的弹框*/ alert("js的学习!!") </script ...

  10. [TimLinux] CSS pre超长自动换行

    使用css样式值: pre { white-space: pre-wrap; word-wrap: break-word; }