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 ...
随机推荐
- ionic中执行pop返回上一个页面,还需要执行操作
<ion-navbar> </ion-navbar> 从A页面push到B页面拿到数据以后,从B页面pop到A页面,在A页面展示刚刚拿到的数据,用 ionViewDidEnte ...
- 以CENTOS6.8系统为例部署ORACLE11g RAC和DNS配置
本文所需要的全部文档均位于文末附录中 本文章以两个节点为例进行安装 在virtual box创建虚拟机时,网卡1为桥接网卡,网卡二为仅主机模式 创建两块磁盘,模式设置为可共享,都添加到两个虚拟机中 在 ...
- 2018/03/08 每日一个Linux命令 之 chattr/lsattr
每日一个Linux命令 2018-03-08 Linux 命令 chattr/lsattr chattr [-参数] [+/-属性] [文件或者目录] 经过今天没有对铃,粥熬糊了,我就知道...... ...
- vue打包后出现"Failed to load resource: net::ERR_FILE_NOT_FOUND"错误
创建vue脚手架搭建项目之后,用npm run build经行打包,运行index.html后出现异常: 打开dist/index.html, 诸如这些的,引入是有问题的, 这边的全部是绝对路径,而本 ...
- There are 0 datanode(s) running and no node(s) are excluded in this operation.
向hadoop导入文件,报错 .... There are 0 datanode(s) running and no node(s) are excluded in this operation. . ...
- @property专题
“属性” (property)作为 Objective-C 的一项特性,主要的作用就在于封装对象中的数据. Objective-C 对象通常会把其所需要的数据保存为各种实例变量.实例变量一般通过“存取 ...
- SSM(Spring+SpringMVC+Mybatis)框架环境搭建(整合步骤)(一)
1. 前言 最近在写毕设过程中,重新梳理了一遍SSM框架,特此记录一下. 附上源码:https://gitee.com/niceyoo/jeenotes-ssm 2. 概述 在写代码之前我们先了解一下 ...
- blockdev命令 blkid命令 lsblk命令
blockdev命令 blkid命令 lsblk命令 http://www.jb51.net/LINUXjishu/310389.html block相关的命令 这篇文章主要介绍了Linux bl ...
- 用python发邮件实例
发QQ邮件 首先确认发件方是否打开了SMTP服务,去QQ邮箱的设置中查看,如果没有请自行开启. from email.header import Header from email.mime.text ...
- 萌新接触前端的第一课——HTML
HTML web服务本质(好吧这个先不用知道也可以) import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOC ...