脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js style对象与CurrentStyle对象

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

 更新时间：2021年08月25日 09:02:29   作者：张baby的小跟班  
这篇文章主要介绍了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对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • readonly和disabled的区别

    readonly和disabled的区别

    要慎用readonly和disabled, 指定了disabled的表单,在submit时,不会把它的值传出去, 如下所示,有两个text,一个是readonly一个是disabled,submit后,只能发送那个不是disabled的,注意地址栏的值. 要保存到本地,因为submit了,不然,看不到效果.
    2008-04-04
  • 比较不错的函数式JavaScript编程指南教程

    比较不错的函数式JavaScript编程指南教程

    你是否知道JavaScript其实也是一个函数式编程语言呢？本指南将教你如何利用JavaScript的函数式特性。
    2008-05-05
  • 再谈JavaScript线程

    再谈JavaScript线程

    继上篇讨论了一些关于JavaScript线程的知识，我们不妨回过头再看看，是不是JavaScript就不能多线程呢？看下面一段很简单的代码（演示用，没考虑兼容问题）：
    2015-07-07
  • Javascript玩转继承（二）

    Javascript玩转继承（二）

    这篇文章主要介绍了对象伪装来实现继承。我们在这里先来说一下这种方式的优缺点
    2014-05-05
  • 构建一个JavaScript插件系统

    构建一个JavaScript插件系统

    这篇文章主要介绍了如何构建一个JavaScript插件系统，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-10-10
  • JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    这篇文章主要介绍了JS实现获取汉字首字母拼音、全拼音及混拼音的方法,涉及针对ChinesePY.js插件的使用及事件响应相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • 如何使用three.js 制作一个三维的推箱子游戏

    如何使用three.js 制作一个三维的推箱子游戏

    这篇文章主要介绍了如何使用three.js 制作一个三维的推箱子游戏，文中代码非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • jquery操作ul的一些操作笔记整理(干货)

    jquery操作ul的一些操作笔记整理(干货)

    下面小编就为大家带来一篇jquery操作ul的一些操作笔记整理(干货)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS异步的执行顺序分析

    JS异步的执行顺序分析

    这篇文章介绍了JS异步的执行顺序，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 微信小程序如何获取用户头像和昵称

    微信小程序如何获取用户头像和昵称

    这篇文章主要介绍了微信小程序如何获取用户头像和昵称，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论