1.只读与可写
getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
2.获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192,
IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
3.作用
getComputedStyle方法有一个很重要的，类似css()方法没有的功能——获取伪类元素样式
4.兼容性
getComputedStyle方法IE6~8是不支持的

getcomputedstyle和style的区别的更多相关文章

  1. getComputedStyle/currentStyle/style之间的爱恨情仇

    getComputedStyle是? getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...

  2. 获取css样式，style、getComputedStyle及currentStyle的区别

    样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...

  3. offsetLeft与style.left区别

    在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...

  4. obj.offsetHeight与obj.style.height区别

    我们都知道obj.offsetHeight与obj.style.height都可以获取obj的高度,但是在js使用中,我们通常会使用前者来获取高度,这是为什么,二者有什么样的区别呢. 1.obj.of ...

  5. ios UITableView的style的区别与用法，以及分割线的显示与隐藏

    ******************tableview style****************************************************** // tableview ...

  6. 样式计算的几种方式与兼容写法：getComputedStyle&currentStyle&style

    window.getComputedStyle(element,[string]) 1参为需要获取样式的元素,2参指定伪元素字符串(如“::after”,不需要则为null),设置2参可获取eleme ...

  7. js中获取样式的俩种方法 style.color和style['color'] 区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. getComputedStyle 方法

    一:getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...

  9. CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute

    js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE:currentStyle,getAttribute 前言 jqu ...

随机推荐

  1. golang 线上项目部署折腾之一

    最近自己使用golang折腾了一点东西,可是需要部署到线上才好玩,那么服务器使用了aws,然后使用了docker和没有使用docker部署了一次.简单记录一下过程 aws服务器 为什么使用aws呢,说 ...

  2. 一个简易的SocketIM

    今天做了一个简易的socketIM的小示例.基本思想是开启两个winform,每个winform既充当服务器也充当客户端.一个监听8000端口,另外一个监听8001端口,两个winform接收到信息之 ...

  3. windows下安装Pycham2020软件

    1.在pycham官网下载安装软件https://www.jetbrains.com/pycharm/download/#section=windows 2.我下载的是64位的安装包,现在开始安装 3 ...

  4. Hyperf基础教程

    前提说明 本教程适用于新手.老手,也适用于任何操作系统,包括Windows.linux.MacOS 介绍 Hyperf 是基于 Swoole 4.4+ 实现的高性能.高灵活性的 PHP 协程框架,内置 ...

  5. POJ 1170 Shopping Offers非状态压缩做法

    Shopping Offers Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5659 Accepted: 2361 Descr ...

  6. FTP服务器项目的一些整理

    几个月前按照网上的教程写了一个FTP的服务器,现在回头整理一下里面的一些知识. FTP简介 FTP是文件传输协议(File Transfer Protocol),工作在TCP/IP协议族的应用层,其传 ...

  7. 大富翁 线段树+二分 +dfs

    https://csustacm.fun/problem/2033 这个题目还是比较简单的,但是比赛的时候没有像清楚,用了一个不太熟悉的数据结构主席树, 所以出现了bug,主席树的bug是真的难找. ...

  8. JavaScript 浅析数组对象与类数组对象

    数组(Array对象) 数组的操作 创建数组方法 添加与修改数组元素 删除数组元素 使用数组元素 遍历数组元素 多维数组 数组相关的函数 concat() join() pop() push() sh ...

  9. ACM入门问题:最大利益问题

    设最大的利益为maxv,最小值为minv 1.求最大利益的简单算法 ;j<=n-;j++) ;i<=j-;i++) maxv =(maxv与R[j]-R[i]中较大的一个) maxv=ma ...

  10. java使用window builder图形界面开发简易计算器

    界面效果: /** * */ package calculator; import java.awt.BorderLayout; import java.awt.EventQueue; import ...