首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将window.getComputedStyle用于带有css calc的pseuso元素样式

window.getComputedStyle是一个用于获取元素计算后的样式的方法。它返回一个包含所有计算后样式属性和对应值的对象。

在使用window.getComputedStyle时,如果要获取带有css calc的pseudo元素样式,需要使用getComputedStyle方法的第二个参数来指定要获取的pseudo元素。pseudo元素是指在CSS中使用::before或::after等伪元素选择器所选中的元素。

以下是一个示例代码:

代码语言:javascript
复制
// 获取带有css calc的::before伪元素样式
const element = document.querySelector('.example');
const beforePseudoElementStyle = window.getComputedStyle(element, '::before');

// 获取带有css calc的::after伪元素样式
const afterPseudoElementStyle = window.getComputedStyle(element, '::after');

在上述示例中,我们通过querySelector方法获取了一个class为example的元素,并使用window.getComputedStyle方法获取了该元素的::before和::after伪元素的样式。

使用window.getComputedStyle可以获取到伪元素的各种计算后的样式属性,例如颜色、字体大小、边框等。通过获取到的样式属性,我们可以根据需要进行进一步的处理和操作。

在腾讯云的产品中,与前端开发和样式相关的产品有腾讯云CDN、腾讯云Web应用防火墙(WAF)等。腾讯云CDN可以加速网站的访问速度,提供更好的用户体验;腾讯云Web应用防火墙(WAF)可以保护网站免受各种Web攻击。

腾讯云CDN产品介绍链接:https://cloud.tencent.com/product/cdn

腾讯云Web应用防火墙(WAF)产品介绍链接:https://cloud.tencent.com/product/waf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第60天:js常用访问CSS属性方法

一、 js 常用访问CSS 属性方法 我们访问得到css 属性,比较常用有两种:     1....利用点语法  box.style.width      box.style.top     点语法可以得到 width  属性  和 top属性  带有单位。...可以给属性传递参数 二、  得到css 样式 我们想要获得css 样式, box.style.left    box.style.backgorundColor 但是它只能得到 行内样式。...1、 obj.currentStyle   ie  opera  常用 外部(使用)和内嵌(使用)样式表中样式(ie和opera) 2、window.getComputedStyle...("元素", "伪类")    w3c 两个选项是必须, 没有伪类 用 null 替代  3 、兼容写法 : 我们这个元素里面的属性很多, left  top  width  === 我们想要某个属性

1.1K10

js之dom元素样式操作

一、元素样式获取 二、style设置 三、获取dom元素非行内样式 四、window.getComputedStyle() 方法使用 1. getComputedStyle() 用法 2....二、style设置 原生js可以单独设置元素行内样式。...window.getComputedStyle(Element);------获取电脑上样式 console.log(window.getComputedStyle(btn));//CSSStyleDeclaration..."; 会报错,这个方法只能获取非行内样式,不能设置样式,read-only 只读 四、window.getComputedStyle() 方法使用 1. getComputedStyle()...而不同点就是: element.style 读取只是元素内联样式,即写在元素 style 属性上样式;而 getComputedStyle 读取样式是最终样式,包括了内联样式、嵌入样式和外部样式

10.6K01
  • js获取元素样式之getComputedStyle方法

    习惯了jquery同学应该都知道获取元素样式方式可以直接写成(obj).css(style);更方便获取高度宽度等一些样式可以直接使用(obj).height()和 一、 getComputedStyle...上面打问号表示没有测试,是否兼容不知。如果您方便测试,欢迎测试结果告知,这里及时更新,并附上您姓名,以谢您做贡献。...,差别在于element.currentStyle返回元素当前应用最终CSS属性值(包括外链CSS文件,页面中嵌入属性等)。...CSS2em属性值: 所以通用方法可以使用下面的代码 return window.getComputedStyle ?...window.getComputedStyle(obj,null).style: obj.currentStyle.style; //style代表向要查询样式名,obj为索要查询元素

    22.7K30

    CSS进阶】原生JS getComputedStyle等方法解析

    假设我们页面上存在一个 id 为 id 元素,那么使用 getComputedStyle 获取元素样式就如下图所示: ?...尝试一下之后可以看到,window.getComputedStyle 获取是所有的样式,如果我们只是要获取单一样式,该怎么做呢。...  必须要提出是,我们使用 element.style 也可以获取元素CSS样式声明对象,但是其与 getComputedStyle 方法还是有一些差异。...回顾一下 CSS 基础,CSS 样式表现有三种方式, 内嵌样式(inline Style) :是写在 HTML 标签里面的,内嵌样式只对该标签有效。...外部样式表(External Style Sheet):如果很多网页需要用到同样样式(Styles),样式(Styles)写在一个以 .CSS 为后缀 CSS 文件里,然后在每个需要用到这些样式(

    1.5K50

    h5新功能data-*,好好利用,还能做数据双向绑定

    标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素属性值 虽然JS里没有可以直接操作伪元素选择符,然而获取其CSS属性方法还是有的。...window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素,然后利用getPropertyValue方法获取对应属性值。...根据MDN文档, window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数,一个是元素本身另一个是元素元素。...方法熟悉 ---- 更改伪元素属性值 window.getComputedStyle方法虽然可以获取到伪元素属性值,然而根据该方法名字也知道其只能获取CSS样式,并无法更改css属性,那么如果想要用...利用内部css样式高优先级来覆盖外部css 以上实现思路推荐程度依次递减 利用DOMdata-*属性来更改content值 data-*是HTML5新增DOM元素属性,作用大致可以理解为标记

    1.8K40

    JS它DOM

    见导图: 二、DOM之CSS样式 对于这部分内容,涉及到也是CSS样式获取和操作。...sheet.cssRules || sheet.rules; var rule1=rules[0]; rule1.style.color='green'; //这样能够在链接CSS样式中改动详细属性...var box=document.getElementById('box'); box.style.color='blue'; //这样方法改动是行内样式 } 小结:针对于CSS...三、元素尺寸和位置 通过上述CSS样式方式,我们也是能够获取DOM中各个元素尺寸和位置,但有一个弊端:当元素中存在pading,margin这些样式设计时,这些方法便不能获得一些元素真正大小和位置...JS中提供了专门儿用于获取元素尺寸和大小方法。 实际大小:针对于元素实际大小。主要与四个因素有关,padding。margin,border,scroll。而以下提供几种方法,针对于不同因素。

    3.2K20

    5分钟实现漂亮CSS加载动画,纯CSS实现加载动画

    video/BV1D5411H7Tc 2 知识点 2.1 CSS calc() 函数 CSS calc() 函数用于动态计算长度值。..."/" 运算; calc()函数使用标准数学运算优先级规则; 支持版本:CSS3 2.2 CSS var() 函数 var() 函数用于插入自定义属性值,如果一个属性值在多处被使用,可以使用该方法...例如,假如您需要并排放置两个带边框框,可通过 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度框,并把边框和内边距放入框中。...指定元素宽度和高度(最小/最大属性)适用于box宽度和高度。元素填充和边框布局和绘制指定宽度和高度除外 border-box 指定宽度和高度(最小/最大属性)确定元素边框。...,100 % 是动画完成,这样规则就是动画序列 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式动画效果 动画是使元素从一个样式逐渐变化为另一个样式效果,可以改变任意多样式任意多次数

    2.2K10

    JS基础(上)

    DOM HTML文档呈现为带有元素、属性和文本树结构(节点树)。 ? ? HTML文档可以说由节点构成集合,三种常见DOM节点: 1....元素节点:上图中、、等都是元素节点,即标签。 2. 文本节点:向用户展示内容,如里内容JavaScript、DOM、CSS等文本。 3....img.src img.style.width 注意 : 中操作div对象修改class名字属性用div.className = CSS样式与DOM : obj.style.width...obj.currrentStyle() 和 window.getComputedStyle()获取 window.getComputedStyle(obj,伪元素)[arrt] : obj获取运算后样式目标元素...; 伪元素 : 一般为null,可以修改为鼠标放上去状态‘:active’ 获取值只读即是只能获取,不能直接修改,要修改还是要通过obj.style.属性 修改 内联样式一开始不能够获取是因为一开始没有定义内联定义

    4.1K140

    Zepto源码分析之ie模块

    -- more --> getComputedStyle Window.getComputedStyle() 方法给出应用活动样式表后元素所有CSS属性值,并解析这些值可能包含任何基本计算。...MDN let style = window.getComputedStyle(element, [pseudoElt]); element element参数即是我们要获取样式元素 pseudoElt...要匹配元素字符串,对于普通元素来说需省略(null) 结果 特别重要是该方法执行后返回样式是一个实时 CSSStyleDeclaration 对象,当元素样式更改时,它会自动更新本身。...// 重写后方法,如果传入第一个参数不是元素节点,被catch捕获,返回null,则不影响后续代码运行 try { getComputedStyle(undefined) } catch...重写方法中是另一个try catch,如果后续再发生错误,返回null,不阻碍后续js代码执行。 结尾 以上便是Zepto ie模块源码分析全部,欢迎提出意见和建议。

    48610

    getComputedStyle与currentStyle

    是window下一个全局函数,可以获取元素真正使用样式。...2.语法 var style = window.getComputedStyle(element[, pseudoElt]); element是用于计算样式dom节点,pseudoElt是一个用于匹配伪类字符串...,对于一般dom元素来说,该参数应该被忽略或设置为null。...css样式,对于浏览器缺省设置、外部样式表以及内部样式表(位于 标签内部)都输出空字符串,而getComputedStyle会输出最终应用于该element上最终样式,而不管该样式是内联还是外联还是浏览器默认...,后者使用getAttribute获取样式; c.getPropertyValue中传入变量不支持驼峰标示,多单词css属性名只能以“-”连接,比如getPropertyValue(“background-color

    1.9K20

    原生JavaScript获取元素margin外边距

    最近想找一个可以获取元素高度(包括外边距margin)方法,原生JS实现方法一直没有找到,不过有一个方法可以获取元素边距,记录一下: 语法是(获取元素属性值): getComputedStyle...(element[,pseudo]); element 需要读取元素值。...CSS 驼峰式写法,均需要注意 float 属性。...而不同点就是: element.style 读取只是元素内联样式,即写在元素 style 属性上样式;而 getComputedStyle 读取样式是最终样式,包括了内联样式、嵌入样式和外部样式...element.style 既支持读也支持写,我们通过 element.style 即可改写元素样式。而 getComputedStyle 仅支持读并不支持写入。

    9.5K10
    领券