style、 currentStyle、 runtimeStyle、getComputedStyle区别分析

1、obj.style只能获得内嵌样式（inline Style）就是写在Tag里面的，他访问不到那些链接的外部css和在head中用<style>声明的style。
所以必须认识到在那些使用外部Css文件的页面中，如果用style赋值，如obj.style=“color:red”;显然效果是正确的，其中的奥秘确是只是在该对象的tag上多添加了一个style属性，按照由小到大的优先级呈现罢了。

2、obj.currentStyle就强大多了，他能够获取关于这个节点所有位置的style，但是他也按照优先级，说穿了就是显示的是什么他就是指向哪一个style，如下代码字体优先是显示blue的，那currentStyle.color就是blue，当然此时style.color也会是blue。

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<title>testStyle</title> 

<style> 

.lala{ 

color:yellow; 

} 

</style> 

</head> 

<body> 

<div id="tt" style="color:blue;" class="lala">1111</div> 

</body> 

<script> 

alert(document.getElementById("tt").currentStyle.color); 

</script> 

</html>

若去掉以上<div>中的style为<div id="tt" class="lala">1111</div>，那么currentStyle.color就根据优先级变成了yellow，但是此时style.color为空。

3、runtimeStyle简单的说就是你可以对一个节点的样式赋值，他将成为最高优先级的节点样式。
如： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<style> 

.lala{ 

color:yellow; 

}</style> 

</head> 

<body> 

<div id="tt" style="color:blue;" class="lala">1111</div> 

</body> 

<script> 

document.getElementById("tt").runtimeStyle.color="black"; 

alert(document.getElementById("tt").currentStyle.color); 

alert(document.getElementById("tt").runtimeStyle.color); 

alert(document.getElementById("tt").style.color); 

</script> 

</html>

此时页面显示字的颜色是runtimeStyle赋值后的black。但是只有currentStyle.color和runtimeStyle本身能够取到这个值,style.color取到的依然是tag中的blue。

4.DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是事情还没完，万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

这样，就能在IE及FF中返回对象的当前样式信息了。

特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制的'#ffffff'，而FF返回的是rgb(255,255,255) 

 

你可能感兴趣的:(currentStyle)

  • eyoucms 导航调用三级栏目的方法 西祠_fa33
    {eyou:channeltype="top"row="60"id="field"currentstyle="active"}{$field.typename}{eyou:channelname="$field.children"row="100"id="field2"}{$field2.typename}{eyou:channelname="$field2.children"row="100"i
  • haslayout解释和触发 星辰_50e6
    haslayout详解定义haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况HTML标签默认触发hasLayout的有如下HTML标签：【1】htm
  • eyoucms adv 广告列表标签 西祠_fa33
    【基础用法】名称：adv功能：获取广告列表内容。语法：{eyou:advpid='1'row='3'}{/eyou:adv}参数：pid=''广告位置IDrow='10'返回广告列表总数currentstyle=''应用样式class类名orderby='now'文档排序方式orderby='hot'或orderby='click'表示按点击数从高到低排序orderby='now'按发布时间最新排
  • eyoucms 当前栏目如何调用子栏目？ 西祠_fa33
    易优cms在当前栏目下如何调用子栏目呢？下面代码即可实现。调用下级栏目{eyou:channeltype="son"currentstyle="active"}{$field.typename}{/eyou:channel}type="son"son表示下级转自：https://www.eyoucms.com/help/eyoujq/1277.html
  • 28、JavaScript学习笔记——脚本化CSS lvh98 cssjavascript学习
    脚本化CSS文章目录脚本化CSS1.读写元素CSS属性1.1dom.style.prop2.读CSS计算属性2.1window.getComputedStyle(eleDom,伪元素字符串/null)2.2currentStyle2.3封装获取计算属性的函数，解决兼容性问题1.读写元素CSS属性1.1dom.style.prop可读写行间样式，没有兼容性问题。dom.style返回一个CSSSty
  • js 获取元素宽高的几种方法 @小倪同学 javascript前端开发语言
    1、Element.style.width/height只能获取内联样式2、window.getComputedStyle(ele).width/height可获取实时的style3、Element.currentStyle.width/height功能与第二点相同，只存在于旧版本IE中(IE9以下)，除了做旧版IE兼容，就不要用它了。4、Element.getBoundingClientRect
  • 织梦dede:channel指定typeid子栏目调用currentstyle高亮无效的解决教程 阿修哥
    dede:channel指定typeid时currentstyle无效{dede:channeltypeid='12'type='son'currentstyle="~typename~"}[field:typename/]{/dede:channel}解决方法打开include/taglib/channel.lib.php找到$row['id']==$typeid改成$row['id']==$r
  • 【易优CMS】screening的基础用法 Jessicahuan
    [基础用法]名称：screening功能：筛选文章语法：{eyou:screeningid='field'currentstyle='active'alltxt='不限'}{eyou:volistname='$field.list'id='vo'}{$vo.title}：{eyou:volistname='$vo.dfvalue'id='val'}{$val.name}{/eyou:volist}
  • 获取DIv样式的时候，处理浏览器不同的兼容性问题 MCherish
    functiongetStyle(obj,attr){returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}
  • 获取css样式 三人_
    functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr];}}通过这种方式获取css3的transform,结果是一个矩阵
  • js事件中的一些兼容写法总结 秃头成就技术
    事件中兼容还是挺多的，这里稍微总结下，大家还得多看多背才能熟记1.获取行内样式兼容functiongetStyle(ele,attr){if(window.getComputedStyle){//通常方法获取returnwindow.getComputedStyle(ele,false)[attr];}else{//ie兼容returnele.currentStyle[attr];}}2.键盘事件
  • js封装一个缓动动画 璃小灯吖
    js封装一个缓动动画，支持传入json数据格式进行多属性操作。具体全部实现代码如下：1、获取元素css样式属性值的方法/****@对象名称{String}obj*@CSS属性{String}attr*/functiongetStyleAttr(obj,attr){if(obj.currentStyle){//IE和operareturnobj.currentStyle[attr];}else{re
  • vue面试题总结记录(1) 萬wan事顺意
    为了未来几周的面试，忙忙碌碌的总结了这么一些面试题。1.js的兼容问题aevent事件问题：varoEvent=ev||window.event;ev是谷歌火狐的写法，IE9以上支持，往下不支持；event谷歌和IE支持，火狐不支持；b.获取元素的非行间样式：functiongetStyle(object,ocss){if(object.currentstyle){returnobj.curren
  • Mkdocs中利用Js实现大小圈鼠标拖动样式 Wcowin javascript前端
    在docs/javascripts/extra.js下复制粘贴：varCURSOR;Math.lerp=(a,b,n)=>(1-n)*a+n*b;constgetStyle=(el,attr)=>{try{returnwindow.getComputedStyle?window.getComputedStyle(el)[attr]:el.currentStyle[attr];}catch(e){}
  • 取非行间样式 想做一个画家
    Document#div1{width:200px;height:200px;background:red;}//取非行间样式：如果样式没有写在行间，//那么应该利用currentStyle(IE)或者getComputedStyle(obj，false).name。//获取复合样式的属性时需要注明所取的明确样式//如获取背景颜色，需要写backgroundColor，直接写background是
  • 二级导航嵌套调用并高亮 黎明的破晓
    织梦一级菜单被点击栏目高亮调用方法：{dede:channeltypeid='1'type='son'currentstyle="~typename~"}[field:typename/]{/dede:channel}*注：对当前栏目列表设置了class='on'，可以通过css样式为其设置背景图片或颜色，从而达到栏目高亮的效果。首页判断是否添加class调用方法：网站首页的位置把class的属性
  • js中兼容性问题 三千繁夢
    JS中出现的兼容性问题的总结1.关于获取行外样式currentStyle和getComputedStyle出现的兼容性问题我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:我们一般通过这两个方法获取行外样式：IE下:currentStyleChrome,FF下:getComputedStyle(oDiv,false)兼容两个浏览器的写法:if(oDiv.currentSty
  • getStyleFunction Jadon7
    getStyleFunctionfunctiongetStyle(obj,name){if(obj.currentStyle){returnobj.currentStyle[name];}else{returngetComputedStyle(obj,false)[name];}}window.onload=function(){varoDiv=document.getElementById('d
  • channelartlist标签完美支持currentstyle属性 阿修哥
    channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式，可以用来标识当前栏目位置的CSS，解决方法如下：打开文件include\taglib\channelartlist.lib.php找到：$pv->Fields['typeurl']=GetOneTypeUrlA($typeids[$i]);在此行代码下方增加以下代码：if($typeids[$i]
  • 脚本化css的知识点及方法封装 QJe
    脚本化CSS查询计算样式window.getComputedStyle(ele,null)计算样式只读返回的样式的值为绝对值（px），不是相对值（em，%）IE8及IE8以下不兼容此时的null如果传递值，可传递伪元素，意思为获取该ele的伪元素的样式ele.currentStyle计算样式只读返回的样式值不是经过转换的绝对值IE特有的属性//针对上述两种查询样式方法封装兼容的fun/***[ge
  • js中常见的兼容问题及其解决方法 林llgb
    在编写js的代码时，总会遇到一些兼容问题，下面来总结一些常见的兼容写法：1.获取样式的兼容写法：A.非IE浏览器：getComputedStyle(元素,false).属性名B.IE浏览器：元素.currenStyle.属性名C.兼容的封装写法：正常浏览器和IE8及以下functiongetStyle(element,attribute){if(element.currentStyle){retu
  • JS如何设置盒模型的宽和高 成熟稳重的李先生
    //只能获取内联样式设置的宽高dom.style.width/height//获取渲染后即时运行的宽高，值是准确的。但只支持IEdom.currentStyle.width/height//获取渲染后即时运行的宽高，值是准确的。兼容性更好window.getComputedStyle(dom).width/height;//获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对
  • 放烟花效果 升龙无涯
    烟花效果图如下：烟花效果代码如下：工具函数//获取随机颜色的函数functiongetColor(){varcolor='#';for(vari=0;i0?Math.ceil(percent):Math.floor(percent);//让当前的值跟计算好的距离相加currentStyle+=percent;//设置样式ele.style[attr]=currentStyle+'px'//如果移动
  • 来讲一下IE和火狐的不同之处 赋帘楠霓
    （1）获取样式：IE支持currentStyle，Firefox支持getComputedStyle（2）文本：IE用innerText，Firefox用textContent（3）事件：IE用attachEvent，Firefox用addEventListener（4）透明度：IE用filter：alpha（opacity=80），Firefox用opacity：0.8（5）鼠标位置：IE用ev
  • js 运动函数封装函数，涉及 是否匀速、目标值、json参数等 Ares-Wang javascript开发语言ecmascript
    VID_20220713_163005Document#div{height:50px;width:80px;background-color:red;}//获取样式functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returnwindow.getComputedStyle(obj,
  • js实现导航栏上下动画效果
    本文实例为大家分享了js实现导航栏上下动画的具体代码，供大家参考，具体内容如下obj.currentStyle[name]与getComputedStyle(obj,false)[name]，一个是支持IE一个支持FE完美运动js插件，能根据传进来的值，进行匹配，从而得到了理想的运动效果，也就是运行逻辑。实现上下动画动画效果就是控制元素height的值，通过不断的修改该值，就能呈现所谓的动画效果，
  • JavaScript style对象与CurrentStyle对象案例详解
    1、Style对象style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。例子：#div{color:gray;}//内部样式//内联样式document.getElementById('id').style.color;//值为red2、currentStyle对象返回所有样式声明（包括内部、外部、内联）按
  • css盒模型 大乔是个美少女
    image.pngw3c的盒模型：宽高只针对content宽高。IE的盒模型：宽高针对的是content+padding+border的宽高。box-sizing:content-boxw3c模型box-sizing:border-boxIE模型js获取：getElementById("aaa").style.width/height【内联】dom.currentStyle.width/heigh
  • 常用函数库 jia林
    //获取样式functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle([attr])}else{returngetComputedStyle(obj,false)[attr]}}//事件绑定functionaddEvent(obj,sEv,fn){if(obj.addEventListener){//兼容ie9+F
  • 3-2 CSS盒模型 zhangmz
    1、标准模型2、IE模型3、CSS如何设置这两个模型box-sizing:content-box;//浏览器默认box-sizing:border-box4、JS如何获取盒模型对应的宽和高dom.style.width/height//只能取到内联样式dom.currentStyle.width/height//只有IE支持window.getComputedStyle(dom).width/he
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他