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

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

会有如下兼容性问题:
    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. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. c#-PropertyChangingEventArgs

    MSDN 解释连接:https://msdn.microsoft.com/zh-cn/library/system.eventargs.aspx#inheritanceContinued[Serial ...

  3. 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  4. Git实战指南----跟着haibiscuit学Git(第五篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  5. Apache和PHP结合、Apache默认虚拟主机

    5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...

  6. 教你如何关闭IIS服务

    由于IIS服务器和Apache的默认端口号都是80端口,有时我们需要关闭IIS服务,下面讲讲关闭IIS服务的方法.   方法如下:   1.services.msc,在里面找到一个“World Wid ...

  7. ubuntu安装过程中遇到的一些问题及解决办法。

    由于ubuntu与win10的双系统安装过程百度一下就有很多,在此不再赘述. (其实主要是忘记拍照片了,我一个菜鸡说得肯定也没有那些大佬们好,但网上确实也很多哈,加上有中文引导安装,问题不大.) 此篇 ...

  8. 2019-2020-1 20199304《Linux内核原理与分析》第一周作业

    通过对Linux基础课程的学习,我对Linux的背景以及和Windows的区别有了了解, Linux 平台:大都为开源自由软件,用户可以修改定制和再发布,由于基本免费没有资金支持,部分软件质量和体验欠 ...

  9. shell脚本sed awk

    删除第一行 sed '1d' test.txt 假装执行 sed -i '1d' test.txt 执行 从第二行删除到行尾 sed '2,$d' test.txt sed -i '2,$d' tes ...

  10. docker tomcat镜像部署springbootwar包

    springboot打war包 1.在pom文件中增加插件 <build> <finalName>xx</finalName> <plugins> &l ...