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 ...
随机推荐
- pytorch的torch.utils.data.DataLoader认识
PyTorch中数据读取的一个重要接口是torch.utils.data.DataLoader,该接口定义在dataloader.py脚本中,只要是用PyTorch来训练模型基本都会用到该接口, 该接 ...
- Quick access recorder
QAR_百度百科 https://baike.baidu.com/item/QAR/3300914
- wfp(Application的运用)
1.Application中封装了wpf的一些常用的功能,如检查未经处理的异常,处理命令行参数等. 2.如何启动wpf程序: app.xaml可用于启动wpf的窗体.也可以不用这用方式.直接创建一个a ...
- LeetCode 292 Nim Game 解题报告
题目要求 You are playing the following Nim Game with your friend: There is a heap of stones on the table ...
- LeetCode 762 Prime Number of Set Bits in Binary Representation 解题报告
题目要求 Given two integers L and R, find the count of numbers in the range [L, R] (inclusive) having a ...
- elasticsearch解决控制台中文乱码问题
找到conf目录下的jvm.options文件,找到如下的配置行: 我将之前的UTF-8 改成GBK,ok.
- AES加解密所遇问题
AES加解密后解密数据末尾携带多余空格,经查看是由于加密时数据不足16个字节自动补齐导致 解决办法:记录加密数据长度,解密后根据数据长度读取解密数据. 另外加密数据中可能存在0等数据,所以拷贝内容时最 ...
- java JDBC (四)
package cn.sasa.demo4; import java.sql.Connection; import java.sql.PreparedStatement; import java.sq ...
- ZedBoard上运行linux系统的准备工作框架
目标:ZedBoard上运行linux系统. 需要什么:图中上色部分. 应该做哪些工作:上色部分之前的所有步骤. 由上图得知,为了顺利在zedboard上构建嵌入式Linux操作系统,我们一般需要如下 ...
- 接口测试工具-Jmeter使用笔记(三:管理请求服务器信息和Headers参数)
如果使用Jmeter同时执行多个http请求任务,就需要创建多个HTTP取样器,每一个取样器都来手动填写服务器信息和端口号,会非常消耗时间. 解决方法:Jmeter之HTTP请求默认值 1.添加方式 ...