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

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

会有如下兼容性问题:
    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. JDK API1.6常用方法

    一.String类 常见用法 : (String类代表字符串,JAVA程序中的所有字符串字面值(如“abc”)都作为此类的实例实现,字符串是常量,他们的值在创建之后不能更改,字符串缓冲区支持可变的字符 ...

  2. php mysql 中文乱码解决,数据库显示正常,php调用不正常

    一般来说,乱码的出现有2种原因,首先是由于编码(charset)设置错误,导致浏览器以错误的编码来解析,从而出现了满屏乱七八糟的“天书”,其次是文件被以错误的编码打开,然后保存,比如一个文本文件原先是 ...

  3. VisualVM分析与HelloWorld、springBoot项目

    VisualVM分析与HelloWorld.springBoot项目 自从1995年第一个JDK版本JDKBeta发布,至今已经快25年,这些年来Java的框架日新月异,从最开始的Servlet阶段, ...

  4. js5——页面转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 暗灰色的圆形按钮.html

    宝宝 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title& ...

  6. Frida用法之函数操作

    Frida接口功能介绍   Frida是个so级别的hook框架,它可以帮助开发.安全人员对指定的进程的so模块进行分析.它主要提供了功能简单的Python接口和功能丰富的JS接口,使得hook函数和 ...

  7. ActiveMQ配置策略

    1.消息发送 1.异步发送 消息生产者使用持久(persistent)传递模式发送消息的时候,Producer.send() 方法会被阻塞,直到 broker 发送一个确认消息给生产者,这个确认消息暗 ...

  8. where 和having 的区别

    where : 约束声明,在查询结果返回之前对数据库中的查询条件进行约束    其后不能写聚合函数 having  过滤声明,在查询结果返回之后进行过滤,

  9. 配置基于全局地址池的DHCP

    配置基于全局地址池的DHCP 配置基于全局地址池的DHCP服务器,从所有接口上的用户都可以选择该地址池中的地址,是个公共地址池. 实验 1.拓扑图 2.实验步骤 基本配置 开启DHCP功能 创建一个全 ...

  10. linux实用小命令--查看文本内容

    一.cat命令 $ cat [参数]filename 这还有一些可以和cat命令一起用的参数,可能对你有所帮助. 1.-n 参数会所有的行加上行号: $ cat -n test1 2.这个功能在检查脚 ...