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. C# 对 TCP 客户端的状态封装

    TCP客户端连接TCP服务器端有几种应用状态: 与服务器的连接已建立 与服务器的连接已断开 与服务器的连接发生异常 应用程序可按需求合理处理这些逻辑,比如: 连接断开后自动重连 连接断开后选择备用地址 ...

  2. Java——Lambda表达式

    一.Lambda表达式入门 我们先来看一段代码:匿名内部类的方式实现参数的传递 interface Command{ public abstract void test(); } public cla ...

  3. 学习vue第六节，v-if和v-show

    vue 中的v-if和v-show <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. window下用notepad++编辑了脚本文件然后放在linux报错显示无法运行

    首先vi :set ff 查看文件类型 接着 下载dos2unix  root用户下yum -y install dos2unix 然后 dos2unix 文件.sh 转换格式  接着在正常启动即可

  5. jQuery中val() text()和html()的区别

    2020年4月21日 16:48:11 jQuery 学习 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.text() 它可以设置和获取起始标 ...

  6. 解决使用nlpir分词，遇到License过期问题

    问题:使用pynlpir分词,遇到License过期问题 抛出异常:pynlpir.LicenseError: Your license appears to have expired. Try ru ...

  7. linux-设置代理和取消代理

    设置代理: export http_proxy="http://proxy-XXXXX" export https_proxy="https://proxy-XXXXX: ...

  8. 移动端纯css超出盒子出现横向滚动条

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 2018-07-01 jq效果

    jq效果的实现方法: 1.基本 show(time) -> 显示:相当于display:block hide(time) -> 隐藏:相当于display:none toggle(time ...

  10. ABP框架踩过的坑系列6

    ABP框架踩过的坑系列6 应是无事.齐侯方才的确到了吴纠庭院https://www.mixcloud.com/ltTFvU888smi8jS/几日行军劳顿其实齐侯本应该睡下了https://www.m ...