JavaSam
JavaSam

style、 currentStyle、 runtimeStyle区别分析-javascript技巧

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。

 

你可能感兴趣的:(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
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他