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& ...
随机推荐
- python3快速入门教程错误和异常
Python 中(至少)有两种错误:语法错误(syntax errors)和异常(exceptions). 语法错误 语法错误又称作解析错误: >>> while True prin ...
- JAVA网络通信底层调用LINUX探究
前言:该博客花了我一个下午得心血,全部手打,路过给个赞,拒绝抄袭!!!!!!!!!!!!!!!!!!!!!!!!! 简单的SOCKET通信程序 先从一段简单的JAVA程序性开始写起,这里我们才用半双工 ...
- Python和Java的区别
这里是我的一些总结,有些是参考别人的(在这里谢谢!!!) 区别: 1.Python比Java简单,学习成本低,开发效率高2.Java运行效率高于Python,尤其是纯Python开发的程序,效率极低3 ...
- NIO-概览
目录 NIO-概览 目录 前言 什么是NIO 通道 缓冲区 选择器 其他 管道 FileLock 参考文档 NIO-概览 目录 NIO-概览 前言 本来是想学习Netty的,但是Netty是一个NIO ...
- MATLAB工具包——curvelet变换的理解(转)
curvelet下载的curvelet工具包,有以下三个文件:fdct_usfft_matlab.fdct_wrapping_matlab.mecv三个文件夹添加到matlab路径中即可. curve ...
- 机器学习笔记(十)---- KNN(K Nearst Neighbor)
KNN是一种常见的监督学习算法,工作机制很好理解:给定测试样本,基于某种距离度量找出训练集中与其最靠近的k个训练样本,然后基于这k个"邻居"的信息来进行预测.总结一句话就是&quo ...
- 分析Crash文件
应用在没有发布前,可以通过打印log很方便的查看错误信息.但是发布后,就需要根据Crash文件来定位了. 将手机连接电脑,通过XCode获取Crash文件.Window ->Devices -& ...
- react-native测试安装
!!!注意!!!:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost等几个第三方库编译.这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论 ...
- Spring事物实例
Spring事务实例: entity实体类: public class Accounts { private int accountid; private String accountname; pr ...
- [TimLinux] Python3 Coverity zeep/SOAP 库使用示例
废话不多说,上代码: # 基于Coverity的示例 from zeep import Client from zeep.wsse.username import UsernameToken conf ...