JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数
获取计算后的样式属性----获取一个元素任意一个样式属性值
获取元素距离左边位置的值
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)---兼容函数的更多相关文章
- JS获取元素计算过后的样式
获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- 前端笔记之JavaScript(八)关于元素&计算后的样式
一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...
- javascript中封装获取样式属性值的兼容方法
function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, nu ...
- JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
- JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
1. getComputedStyle() 方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...
- JS获取对象在内存中计算后的样式
通过obj.style的方式只能取得"内联style"的值,对于<style></style>中的css属性值,则无能为力 . 我们可以用obj.curre ...
- js获取计算后的样式表
在编写html时,使用dom对象的style属性可以获取标签里的style属性,但是不能获取单独css样式文件或者style标签的属性值 <div style="width:10px& ...
随机推荐
- 【转】Pandas常见用法总结
关键缩写和包导入 在这个速查手册中,我们使用如下缩写: df:任意的Pandas DataFrame对象 s:任意的Pandas Series对象 raw:行标签 col:列标签 引入响应模块: im ...
- centos7环境搭建一台mysql服务器启动多个端口
在一台服务器上启动多个mysql实例,分别用不同的端口号,因centos7版本安装mysql5.7后不存在mysqld_multi .mysqld_safe等命令,做踩坑总结 Mysql多实例实现的3 ...
- 行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释
最近在看张鑫旭大佬的<css世界>,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...
- num += num 与 num = num+ num
a = 100def test(num): num += num print(num) test(a)print(a) 200100 这里 num += num 与 num = num+ num 不能 ...
- NSURLSession的用法
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //[self getTest]; ...
- 系统默认的alert弹出框总会带有域名
最近在开发Hybrid APP时发现用系统默认的alert弹出框总会带有域名,用户体验就比较不好了.想了一种办法来解决就是覆盖alert的方法. (function(){ window.a ...
- 本地Docker Jenkins构建dotnet core web应用到Linux服务器 Docker上
1.准备工作 环境 本地: Windows.Docker 代码仓库:Git 服务器:Linux.Docker 前提准备 创建个有dockerfile文件的dotnet core 3 web项目 新建一 ...
- 【我的物联网成长记6】由浅入深了解NB-IoT
[摘要] 什么是NB-IoT?NB-IoT有什么优势?NB-IoT能做什么?本文将会从NB-IoT技术的发展历程,技术特点,通信协议,应用场景等方面为您全方面解读NB-IoT技术,了解NB-IoT的独 ...
- [Abp vNext 源码分析] - 13. 本地事件总线与分布式事件总线 (Rabbit MQ)
一.简要介绍 ABP vNext 封装了两种事件总线结构,第一种是 ABP vNext 自己实现的本地事件总线,这种事件总线无法跨项目发布和订阅.第二种则是分布式事件总线,ABP vNext 自己封装 ...
- Android多线程之(一)——View.post()篇
前言 提起View.post(),相信不少童鞋一点都不陌生,它用得最多的有两个功能,使用简便而且实用: 1)在子线程中更新UI.从子线程中切换到主线程更新UI,不需要额外new一个Handler实例来 ...