一小志
一小志

getComputedStyle

Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是readonly的。IE中则用currentStyle代替。

语法：arr_style=window.getComputedStyle(elem_id,ov)

其中ov:伪元素，是否要获取伪元素属性值。如hover,active,link等属性。如果不想获取这些伪元素的属性值请填写为null。

当要读取具体某个css属性时必须使用getPropertyValue或getPropertyCSSValue。

至于getPropertyValue和getPropertyCSSValue有什么区别，getPropertyValue返回的是一个string，而getPropertyCSSValue返回的是一个CSS2Properties对象。
可以参考：https://developer.mozilla.org/en/DOM/window.getComputedStyle

你可能感兴趣的:(getComputedStyle)

  • html5 draggable 随意拖动任意位置 书中自有妍如玉 前端html5前端html
    functiondrag_start(event){varstyle=window.getComputedStyle(event.target,null);event.dataTransfer.setData("text/plain",(parseInt(style.getPropertyValue("left"),10)-event.clientX)+','+(parseInt(style.ge
  • js获取dom元素的宽度数值 yunchong_zhao javascript前端开发语言
    有的时候我们需要依赖元素的具体的宽高数值，那这个时候就需要你来进行调用了相关的api进行获取了这个需要搭配getComputedStyle+getPropertyValueDocumentdiv{height:202.35px;width:201.12px;border:1pxsolid#f00;display:none;}letdiv=document.querySelector('div')l
  • vue-cropper打包部署后运行报错i.call is not a function youyudexiaowangzi vue.js前端javascript
    本地vue2使用vuecropper测试良好，部署后直接报错i.callisnotafunction.和UncaughtTypeError:Failedtoexecute'getComputedStyle'on'Window':parameter1isnotoftype'Element'从npm安装的vue-cropper目录中看到vuecropper的源码，getComputedStyle的第一
  • JavaScript零基础入门 9：JavaScript读取元素的样式 哪 吒 javascriptjava前端
    作者简介：哪吒，CSDN2021博客之星亚军、新星计划导师✌、博客专家哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步目录一、getComputedStyle()1、getComputedStyle()是window的方法，可以获取元素当前的样式2、两个参数3、代码实例
  • 可移动的div Despairsss 前端javascriptcss
    一、实验题目做一个可移动的div二、实验代码*{margin:0;padding:0;}div{width:100px;height:100px;background-color:rebeccapurple;}letdiv=document.querySelector("div")div.style.position="absolute"w=parseInt(getComputedStyle(di
  • 前端 getMaxZIndex 获取页面里面最大的z-index值 戴向天 前端JSz-index最大层级戴向天前端工具
    大家好！我叫戴向天QQ群：602504799QQ:809002582如若有不理解的，可加QQ群进行咨询了解functiongetMaxZIndex(){letarr=[...document.all].map(e=>+window.getComputedStyle(e).zIndex||0);returnarr.length?Math.max(...arr)+1:0}
  • 获取非行内样式的方法 手机返厂中
    非行间样式就是写在style中的样式。要获取非行间样式根据浏览器划分，有两种方法。//想要获取样式的元素//元素的样式#box{width:200px;height:200px;background:coral;}一：标准浏览器比如：谷歌，狐火，360...//getComputedStyle(元素).样式属性getComputedStyle(box).height二：IE元素.currentSt
  • 标签没有定位的时候给他加relative 一位有礼貌的先生
    vardivDom=document.querySelector('div');if(getComputedStyle(divDom).position==='static'){if(divDom.style.position===''||divDom.style.position==='static'){divDom.style.position='relative';}}
  • 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
  • DOM 操作样式 （getComputedStyle()） KLW75 javascript
    getComputedStyle()getComputedStyle()方法返回指定节点计算后的CSS属性的值.window.getComputedStyle(document.body)["display"];获取伪元素上的CSS属性写法。window.getComputedStyle(document.body,":after")[display];document.body指定节点的位置可换
  • js 获取元素宽高的几种方法 @小倪同学 javascript前端开发语言
    1、Element.style.width/height只能获取内联样式2、window.getComputedStyle(ele).width/height可获取实时的style3、Element.currentStyle.width/height功能与第二点相同，只存在于旧版本IE中(IE9以下)，除了做旧版IE兼容，就不要用它了。4、Element.getBoundingClientRect
  • JS_原生JS获取外边距 CrazyMax_zh 前端jsjavascript
    //获取DIVvartitleImgDiv=document.getElementById("titleImgDiv");vartitleImgDivStyle=getComputedStyle(titleImgDiv,null);alert(titleImgDivStyle.paddingBottom);
  • 1. 怎么判断容器内元素内容是否溢出了 2. typeof和instanceof的区别 狂暴草鱼卷 1024程序员节vue.jsjavascript
    通过内容文字长度和个数计算显示占比宽度typeof和instanceof的区别判断盒子内是否有省略号的代码示例确定slot传进来的div有没有出现省略号因为应用范围较广slot里面被传过来什么都有可能constel=this.$slots.default[0].elm;不能保证el一定是个Element对象。需要确保传递给getComputedStyle()的是一个Element对象。所有在Jav
  • 获取DIv样式的时候，处理浏览器不同的兼容性问题 MCherish
    functiongetStyle(obj,attr){returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}
  • rem方案计算根元素font-size大小 没有可乐的可乐瓶子
    vardesignWidth=750,rem2px=100;varhtml=document.querySelector("html");varhtmlFontSize=parseFloat(window.getComputedStyle(html,null).getPropertyValue('font-size'));functionrefreshRem(){html.style.fontSi
  • 获取组件高度与宽度 都挺好，刚刚好 面试题csshtml
    vue获取组件高度//当前区域12//获取高度值（内容高+padding+边框）letheight=this.$refs.element.offsetHeight;//1001//获取元素样式值（存在单位）letheight=window.getComputedStyle(this.$refs.element).height;//100px1//获取元素内联样式值（非内联样式无法获取）lethei
  • 带样式的HTML节点深拷贝 ZTao-z 前端html前端
    引用自摸鱼wiki1.思路使用cloneNode(true)深拷贝节点及其子节点的结构利用computedStyle获取当前节点的样式遍历获取的样式结构体，赋值给复制节点递归子节点，循环进行2-3步2.代码示例functioncopyStyle(node:HTMLElement,targetNode:HTMLElement){constcomputedStyle=getComputedStyle(
  • vue简记，部署相关，企业微信内部应用开发（vue） 公纸晓白
    通过getComputedStyle获取标签渲染后样式：letmy_div=document.getElementById("myDiv");letstyle=window.getComputedStyle(my_div,null);部署nginx服务器时，局域网访问需打开nginx的防火墙；部署tomcat服务器时，注意在项目根目录（即有index.html的文件夹内）添加WEB-INF文件夹，
  • js事件中的一些兼容写法总结 秃头成就技术
    事件中兼容还是挺多的，这里稍微总结下，大家还得多看多背才能熟记1.获取行内样式兼容functiongetStyle(ele,attr){if(window.getComputedStyle){//通常方法获取returnwindow.getComputedStyle(ele,false)[attr];}else{//ie兼容returnele.currentStyle[attr];}}2.键盘事件
  • ie浏览器下，循环el-table表格每列设置的宽度失效 前端一条鱼
    大家好，我是前端一条鱼_.今天遇到一个问题：ie11下，循环的多个el-table，每列设置的固定宽度width='100'失效。分析原因：可能是由于el-table表格在循环时，ie下table表格的宽度没有值，不能根据具体的宽度，设置每列的宽度。（以上自己瞎分析，出错勿听）解决思路和代码：1.获取一个table表格元素2.使用window.getComputedStyle方法返回table元素
  • elementui 更换主题色 沿着路走到底 项目应用记录elementui前端javascript
    定义CSS变量，由var()函数来获取值。/*设定值*/:root{--background-color:#FF0000;}/*获取值*/div{background-color:var(--background-color);}JS获取变量constelement=document.documentElement;conststyle=window.getComputedStyle(elemen
  • 原生js判断元素是否隐藏，jq判断元素是否隐藏 墨语轩 随笔原生js判断元素是否隐藏jq判断元素是否隐藏
    一.原生js判断元素是否隐藏1.通过offsetParent判断，使用这种方法来判断当前元素是否被隐藏，包括通过设置父元素为display:none以及自己本身为none的情况。但是如果是通过设置visibility:hidden则无法检测出。functionisHidden(el){returnel.offsetParent===null;}2.通过getComputedStyle方式判断fun
  • JS中遇到的问题总结 琪公子呀 JavaScriptjavascript前端css
    文章目录1、[css中用opacity、visibility、display属性将元素隐藏的对比分析](https://segmentfault.com/a/1190000015116392)2、html中cursor的属性3、在引入的css或者js文件后面加参数的作用4、原生js使用getComputedStyle方法获取css内部属性值5、JS处理语言国际化的一个方法6、[js数组删除某个未知
  • javaScript：DOM中的CSS操作 小姚学前端 javascriptjavascriptcss开发语言
    目录1.style属性获取元素写在行间的样式2.getComputedStyle(元素对象，null)可以获取元素的非行间样式3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）效果预览图代码实现在JavaScript中，可以通过DOM（文档对象模型）操作来访问和修改网页上的CSS样式。js提供了灵活的方式来操作和修改DOM元素的CSS样式，使网页开发者可以根据需要进行样式的动态控制和改
  • 通过js获取css变量 Gino_Li
    getComputedStyle(document.documentElement).getPropertyValue('--main-color').trim()//#000
  • 2019-05-23 带指定滚动条位置的缓冲动画框架 DreamNeverDie
    functionstartMove(obj,json,fnEnd){clearInterval(obj.timer);obj.timer=setInterval(function(){letbStop=true;letcur=0;for(letattrinjson){if(attr=='opacity'){cur=Math.round(parseFloat(getComputedStyle(obj
  • 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是
  • getComputedStyle的用法 时雨.` JS知识点总结js
    getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用需要两个参数第一个：要获取样式的元素第二个：可以传递一个伪元素，一般都传null该方法会返回一个对象，对象中封装了当前元素对应的样式1.可以通过getComputedStyle(对象，null).样式名的形式来读取样式如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如：没有设置wid
  • 原生JS设置和获取transform样式 m0_37653407 javascriptcss
    原生JS设置和获取transform样式用JS获取transform样式的值lettabulW=document.querySelector('.tabul')/*获取DOM元素*/lettransX=document.defaultView.getComputedStyle(tabulW,null).transform会返回一个字符串比如我这里是设置了translateX-200px//获取的字
  • 继之前的线程循环加到窗口中运行 3213213333332132 javathreadJFrameJPanel
    之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。 package thread; import java.awt.Graphics; import java.text.SimpleDateFormat; import java.util
  • linux 常用命令 BlueSkator linux命令
    1.grep 相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。 但之前总是习惯于使用 （grep -n 关键字 文件名 ）查出关键字以及该关键字所在的行数，然后再用 （sed -n  '100,200p' 文件名），去查出该关键字之后的日志内容。 但其实还有更简便的办法，就是用（grep  -B n、-A n、-C n 关键
  • php heredoc原文档和nowdoc语法 dcj3sjt126com PHPheredocnowdoc
    <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body> <?
  • overflow的属性 周华华 JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • 《我所了解的Java》——总体目录 g21121 java
            准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。         在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。    &n
  • [简单]docx4j常用方法小结 53873039oycg docx
            本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下:         import java.io.File; import java.io.FileInputStream; import ja
  • Spring配置学习 云端月影 spring配置
    首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q
  • Java新手入门的30个基本概念三 aijuans java新手java 入门
    17.Java中的每一个类都是从Object类扩展而来的。　　18.object类中的equal和toString方法。　　equal用于测试一个对象是否同另一个对象相等。　　toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法)　　 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。　
  • 《2008 IBM Rational 软件开发高峰论坛会议》小记 antonyup_2006 软件测试敏捷开发项目管理IBM活动
    我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵! 其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下. 参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.
  • PL/SQL的过程编程,异常,声明变量,PL/SQL块 百合不是茶 PL/SQL的过程编程异常PL/SQL块声明变量
    PL/SQL;    过程; 符号; 变量; PL/SQL块; 输出; 异常;     PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作
  • Mockito(三)--完整功能介绍 bijian1013 持续集成mockito单元测试
            mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。 一.使用mockito验证行为 //首先要import Mockito import static org.mockito.Mockito.*; //mo
  • 精通Oracle10编程SQL(8)使用复合数据类型 bijian1013 oracle数据库plsql
    /* *使用复合数据类型 */ --PL/SQL记录 --定义PL/SQL记录 --自定义PL/SQL记录 DECLARE TYPE emp_record_type IS RECORD( name emp.ename%TYPE, salary emp.sal%TYPE, dno emp.deptno%TYPE ); emp_
  • 【Linux常用命令一】grep命令 bit1129 Linux常用命令
    grep命令格式   grep [option] pattern [file-list]     grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。   pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特
  • mybatis3入门学习笔记 白糖_ sqlibatisqqjdbc配置管理
    MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。  MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。   以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。
  • Linux 命令神器：lsof 入门 ronin47 lsof
           lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。 有趣的是，lsof也是有着最多
  • java实现两个大数相加，可能存在溢出。 bylijinnan java实现
    import java.math.BigInteger; import java.util.regex.Matcher; import java.util.regex.Pattern; public class BigIntegerAddition { /** * 题目：java实现两个大数相加，可能存在溢出。 * 如123456789 + 987654321
  • Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法 Kai_Ge Kettle
    Kettle学习资料分享   Kettle 3.2 使用说明书 目录 概述..........................................................................................................................................7 1.Kettle 资源库管
  • [货币与金融]钢之炼金术士 comsci 金融
           自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的        那么随着人类在理论物理和工程物理上面取得的一些突破性进展......        炼金术这个古老
  • Toast原来也可以多样化 dai_lm androidtoast
    Style 1： 默认 Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT); def.show(); Style 2： 顶部显示 Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT); t
  • java数据计算的几种解决方法3 datamachine javahadoopibatisr-languer
    4、iBatis     简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。     复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据
  • 向网页中插入透明Flash的方法和技巧 dcj3sjt126com htmlWebFlash
    将 Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。 　　一、Swf透明、无坐标控制　　首先教大家最简单的插入Flash的代码，透明，无坐标控制： 　　注意wmode="transparent"是控制Flash是否透明
  • ios UICollectionView的使用 dcj3sjt126com
    UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。 个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。 1.UIViewController实现委托，代码如
  • Eos平台java公共逻辑 蕃薯耀 Eos平台java公共逻辑Eos平台java公共逻辑
     Eos平台java公共逻辑 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:20:4
  • SpringMVC4零配置--Web上下文配置【MvcConfig】 hanqunfeng springmvc4
    与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。   applicationContext-MvcConfig.xml <!-- 启用注解，并定义组件查找规则 ，mvc层只负责扫描@Controller --> <
  • 解决ie和其他浏览器poi下载excel文件名乱码 jackyrong Excel
       使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码， 因此必须综合判断，编写一个工具类：      /** * * @Title: pro
  • 挥洒泪水的青春 lampcy 编程生活程序员
    2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！ 这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到
  • 稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制 nannan408
       对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？    笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。    我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在
  • 动态设置iframe高度(iframe高度自适应) Rainbow702 JavaScriptiframecontentDocument高度自适应局部刷新
    如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。 但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。 对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id=&quo
  • 用Rapael做图表 tntxia rap
    function drawReport(paper,attr,data){          var width = attr.width;     var height = attr.height;          var max = 0;   &nbs
  • HTML5 bootstrap2网页兼容（支持IE10以下） xiaoluode html5bootstrap
    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他