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

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

会有如下兼容性问题:
    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. github下载历史版本--xdd

    第一步 打开一个仓库,可以看到此时在主分支下,点击1位置查看历史版本 第二步 现在可以查看到所有的版本(提交)信息,单击2位置进入该版本 第三步 单击3位置浏览并打开该版本 第四步 进入该版本之后,可 ...

  2. 洛谷P1426-小鱼会有危险吗

    原题链接: https://www.luogu.org/problem/P1426 题面简述: 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%98 ...

  3. Mysql数据库调优和性能优化的21条最佳实践

    Mysql数据库调优和性能优化的21条最佳实践 1. 简介 在Web应用程序体系架构中,数据持久层(通常是一个关系数据库)是关键的核心部分,它对系统的性能有非常重要的影响.MySQL是目前使用最多的开 ...

  4. python_爬虫

    1.网络爬虫    1.定义:网络蜘蛛,网络机器人,抓取网络数据的程序    2.总结:用Python程序去模仿人去访问网站,模仿的越逼真越好    3.目的:通过有效的大量的数据分析市场走势,公司的 ...

  5. 动态规划--最长上升子序列(LIS)的长度

    l例如:对于[3,1,4,2,5],最长上升子序列的长度是3 arr = [3,1,4,5,9,2,6,5,0] def lis(arr): #dp[i]表示第i个位置的值为尾的数组的最长递增子序列的 ...

  6. Docker简介与安装

    简介与安装 简介 Docker是什么 一款产品从开发到上线,从操作系统,到运行环境,再到应用配置.作为开发+运维之间的协作我们需要关心很多东西,这也是很多互联网公司都不得不面对的问题,特别是各种版本的 ...

  7. python3.6异步IO包asyncio部分核心源码思路梳理

    关于python异步编程的演进过程,两篇文章阐述得妥妥当当,明明白白. 中文资料:https://mp.weixin.qq.com/s?__biz=MzIxMjY5NTE0MA==&mid=2 ...

  8. C#——Unity事件监听器

    事件监听器 事件类型 public enum BaseHEventType { GAME_OVER, GAME_WIN, PAUSE, ENERGY_EMEPTy, GAME_DATA } 事件基类 ...

  9. MySQL必知必会(使用子查询)

    SELECT cust_name, cust_contact FROM customers WHERE cust_id IN (SELECT cust_id FROM orders #单独写多个分句, ...

  10. luogu P2345 奶牛集会 |排序+树状数组

    题目描述 约翰的N 头奶牛每年都会参加"哞哞大会".哞哞大会是奶牛界的盛事.集会上的活动很多,比如堆干草,跨栅栏,摸牛仔的屁股等等.它们参加活动时会聚在一起,第i 头奶牛的坐标为X ...