javascript获取style兼容性问题
获取css 样式的方法有三种 : style, currentStyle , getComputedStyle
style (无兼容性问题)
获取语法: ele.style.attr ; 设置语法:ele.style.attr = '值'
大多数情况下,javascript中获取和设置style样式都是通过类似" div.style.fontSize" 的方式 , 但是该方式只能获取行内样式 , 即通过link或者<style>引入的样式无法获取, 如行内没设置样式, 返回为空值。
currentStyle (支持IE, 不支持FF和Chrome)
语法 ele.cureentStyle.attr或者 ele.currentStyle[attr]
当在script中打印 console.log(div.currentStyle)时, 在IE上输出[object Object], 而在Chrome中输出undefined, console.log(window.getComputedStyle)则相反.
getComputedStyle (支持FF和Chrome,不支持IE)
语法 window.getComputedStyle(ele, null).attr 或者 window.getComputedStyle(ele, null)[attr]
解决currentStyle和getComputedStyle的兼容性问题, 注意,两者都只能获取css而不能设置css
function getStyle (ele, styleName) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[styleName]
} else {
return ele.currentStyle[styleName]
}
}
// 调用
getStyle(div, 'fontSize')
javascript获取style兼容性问题的更多相关文章
- JavaScript之Style属性学习
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- CSS和JavaScript标签style属性对照表
CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...
- javascript 获取下一个节点
下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...
- javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 function getImgInfo(url){ var img = new Image(), loaded = false; var info = {}; ...
- JavaScript获取元素样式
原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...
- JavaScript获取html元素的实际宽度和高度
一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...
随机推荐
- 【每日dp】 Gym - 101889E Enigma 数位dp 记忆化搜索
题意:给你一个长度为1000的串以及一个数n 让你将串中的‘?’填上数字 使得该串是n的倍数而且最小(没有前导零) 题解:dp,令dp[len][mod]为是否出现过 填到第len位,余数为mod 的 ...
- MySQL复制原理-加强版
mysql从3.23开始提供复制功能,复制指将主库的ddl和dml操作通过binlog文件传送到从库上执行,从而保持主库和从库数据同步.mysql支持一台主库同时向多台从库复制,从库同时也可以作为其他 ...
- 内存管理 垃圾回收 C语言内存分配 垃圾回收3大算法 引用计数3个缺点
小结: 1.垃圾回收的本质:找到并回收不再被使用的内存空间: 2.标记清除方式和复制收集方式的对比: 3.复制收集方式的局部性优点: https://en.wikipedia.org/wiki/C_( ...
- elasticsearch ingest node and docker-cluster---quey using sql]
es-docker-cluster https://stefanprodan.com/2016/elasticsearch-cluster-with-docker/ https://github.co ...
- 部署WEB项目到服务器(一)安装java到linux服务器(Ubuntu)详解
突发奇想,想在自己电脑上部署一个web网站. 1,首先要下载一个适合已经安装的linux系统的java版本. 登录网址:http://www.oracle.com/technetwork/java/j ...
- 深探树形dp
看到同学在写一道树形dp,好奇直接拿来写,发现很不简单. 如图,看上去是不是很像选课,没错这不是选课,升级版吧,多加了点东西罢了.简单却调了一晚上和一上午. 思路:很简单强联通分量+缩点+树形dp.直 ...
- IntelliJ IDEA Ultimate 下载与安装
一.下载 Intellij IDEA Ultimate 下载链接:https://www.jetbrains.com/idea/download/#section=windows 1.进入官网点击Ul ...
- 什么是Docker?(一)
Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,它是基于 dotCloud 公司多年云服务技术的一次革新,并于 2013 年 3 月以 ...
- 用laravel dingo/api创建产品api
沿着上一篇来讲,我们来创建一个简单的item产品api,也是用到laravel dingo/api来实现,对dingo/api不熟的朋友可以翻看前面的文章.好,我们随着ytkah一起来创建产品api ...
- Replication主要配置项
八.Replication主要配置项(配置文件) 1.log_bin:指定binlog文件的名称,同时也表示开启binlog功能,在replication模式下,master上必须开启log_bin, ...