JavaScript style对象与CurrentStyle对象案例详解

1、Style对象

style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。

例子：

<style type="text/css">#div{color:gray;}</div>//内部样式
<div id="div" style="color:red;"></div>//内联样式
document.getElementById('id').style.color;//值为red

2、currentStyle对象

返回所有样式声明（包括内部、外部、内联）按css层叠规则作用于元素的最终样式。只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式。getComputeStyle()方法可以获取当前元素所使用的css属性值。

var div=window.getComputeStyle("div",null).color;//第一个参数为目标元素，第二个参数为伪类（必需，没有伪类设为null）

与style对象的区别：

getComputeStyle()是只读，只能获取不能设置，style能读能设；

对于一个没有设定任何样式的元素，getComputedStyle()返回对象中的length属性值，而style对象中length是0。

不同的浏览器对currentStyle对象支持有差异，需要兼容处理。

var div=document.getElementById('div');

var colorStr=null;

if(div.currentStyle){//兼容IE

       colorStr=div.currentStyle;

}else{
colorStr=window.getComputedStyle(div,null);

}

var col=colorStr.color;//得到div的color属性值

3、例子（可拖动的层）

currentstyle对象

style对象

到此这篇关于JavaScript style对象与CurrentStyle对象案例详解的文章就介绍到这了,更多相关js style对象与CurrentStyle对象内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件. 下面

  • 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

  • (currentStyle)javascript为何有时用style得不到已设定的CSS的属性

    这是按第2下兰色的横条才开始出效果,就是说第1下没有获得foot.style.display=="none",可是CSS里我定义了 <style type="text/css"> #top {width:100px; background-color:#00CCFF; height:20px} #foot {width:100px; background-color: #CCCC00; height:50px; display:none} </st

  • JavaScript仿京东实现秒杀倒计时案例详解

    JavaScript仿京东实现秒杀倒计时案例详解

    功能介绍: 1.这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval) 2.三个黑色的盒子,分别存放时.分秒 3.三个盒子利用innerHTML存入倒计时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&quo

  • JavaScript 上传文件限制参数案例详解

    项目场景: 1,上传文件限制 功能作用: 1,防止前端操作上传异常文件 2,限制符合的规则,优化展示模型 功能实现: 1,获取file实例 2,执行校验规则方法 代码如下: //大小限制 checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return tr

  • JavaScript 解决ajax中parsererror错误案例详解

    解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的ajax请求 $.ajax({ type:'get', url:"{php echo $this->createWebUrl('ajax',array('ac'=>'cunByXiangId'))}", data:{id:id}, dataType:'json',//这个地方是

  • JavaScript style对象与CurrentStyle对象案例详解

    JavaScript style对象与CurrentStyle对象案例详解

    1.Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象.style对象获取的是内联样式,即元素标签中style属性的值. 例子: <style type="text/css">#div{color:gray;}</div>//内部样式 <div id="div" style="color:red;"></div>//内联样式 document.getEl

  • javascript设计模式之对象工厂函数与构造函数详解

    下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识. 概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法.然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象.1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript还提

  • Java将json对象转换为map键值对案例详解

    Java将json对象转换为map键值对案例详解

    本文的目的是把json串转成map键值对存储,而且只存储叶节点的数据 比如json数据如下: {responseHeader:{status:0,QTime:0},spellcheck:{suggestions:{中国:{numFound:9,startOffset:0,endOffset:2,suggestion:[中国工商银行, 中国人民, 中国国际, 中国农业, 中国市场, 中国经济, 中国人, 中国广播, 中国文化]}},collations:{collation:中国工商银行}}} 如

  • vue 绑定对象,数组之数据无法动态渲染案例详解

    vue 绑定对象,数组之数据无法动态渲染案例详解

    项目场景: 黑马vue项目管理实战,获取商品分类,展开栏的标签页中修改修改数据属性 问题描述: 在本该点击+new tag这个标签页时弹出一个input框让用户输入需要添加的属性 结果点击时却不能立马渲染 async getParametersList() { this.cat_id = this.currentSelect[this.currentSelect.length - 1]; const { data: res } = await this.$http.get( `categorie

  • Java JSONObject与JSONArray对象案例详解

    JSONObject与JSONArray 最近在学习过程中用到了稍微复杂点的json数据需要将json数据解析出来,这里就截取一部分作为例子 1.JSONObject介绍 JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包. 2.下载jar包 xiazai.jb51.net/202109/yuanma/json-object-lib_jb51.rar *或者在Maven的pom.xml文件中直接配置如下: <de

  • Javascript对象及Proxy工作原理详解

    Javascript对象及Proxy工作原理详解

    正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,

  • JavaScript console对象与控制台使用示例详解

    目录 1. console对象 2. console的静态方法 3. 自定义console 4. 控制台命令行API 4.1 $_ 4.2 $0-$4 4.3 $(selector) 4.4 $x(path) 4.5 inspect(obj) 4.6 keys()和values() 4.7 其它的命令 1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 console.l

随机推荐