将window.getComputedStyle用于带有css calc的pseuso元素样式
window.getComputedStyle是一个用于获取元素计算后的样式的方法。它返回一个包含所有计算后样式属性和对应值的对象。
在使用window.getComputedStyle时，如果要获取带有css calc的pseudo元素样式，需要使用getComputedStyle方法的第二个参数来指定要获取的pseudo元素。pseudo元素是指在CSS中使用::before或::after等伪元素选择器所选中的元素。
以下是一个示例代码：
// 获取带有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
相关·内容
我在页面上有一些元素，它们有一个前面的伪元素，它的高度是用CSS calc()函数设置的；如下所示： content: "";}
我想使用来获取:before元素的高度-在基于Webkit的浏览器中，它可以工作并返回一个像素值。var height = window.getComputedSty
浏览 4提问于2016-08-17得票数 4
回答已采纳
好吧，我完全期待因为问一些愚蠢的事情(或者至少是重复的)而陷入困境，但是在附加的片段中，为什么我必须使用window.getComputedStyle来访问CSS应用的样式呢？我的印象是，.style字段至少会反映那些最初由CSS应用的样式，并且/或从那以后手动更改。re
浏览 1提问于2019-01-23得票数 5
回答已采纳
2回答
我使用opacity: 0作为我的类.best-match。CSS (Sass)如下所示： opacity: 0.best-match[_ngcontent-tli-c4] {如果将属性设置为0，我想使用JavaScript进行检查。我试过了但是输出
浏览 0提问于2019-11-14得票数 0
回答已采纳
我正在尝试创建一个基本的网页，允许用户在按下按钮时创建一个新的DIV。我成功地完成了这一部分。现在，为了在按下时找到单独的DIV (这样我可以在以后应用其他功能，如编辑它)，而不使用大量重复的代码，我创建/设计了一个系统，它可以比较悬停在上面的DIV的颜色并找到它的ID。然而，分配给DIV的颜色显然仍然是空的，尽管您可以看到CSS改变了它的颜色。有什么建议吗？如果我的代码显示得很糟糕，我很
浏览 0提问于2017-08-04得票数 1
4回答
我正在尝试获取身体的背景颜色，我想知道这两者的区别是什么：window.getComputedStyle(body).getPropertyValue
浏览 0提问于2013-11-13得票数 4
我正在尝试从display:none;读取div (div id=“导航菜单”)的显示值(display:block;或id=)。但是，当我在同一个html文件中设置样式值时，我可以读取，但当我在链接的CSS样式表中设置样式值时，它不会读取(结果只是空白)。<!html><meta http-equiv="Content-Type" content="text/html; charset=utf-
浏览 7提问于2015-05-10得票数 4
回答已采纳
1回答
代码中，如果我这样做的话：console.log(x.style.visibility) -->这显示为"“
在我的css
浏览 4提问于2021-01-27得票数 0
回答已采纳
每个用户代理都有自己的默认样式表。例如，以下是当前边缘铬的默认button元素样式： button { -webkit-writing-mode: horizontal-tb !(rgb(118, 118, 118), rgb(133, 133, 133)); border-radius: 2px;
} 我想让锚点元素看起来像一个按钮我可以将上面的CSS复制
浏览 23提问于2021-06-15得票数 0
有人能告诉我为什么document.body.style.backgroundColor不与外部CSS样式表一起工作吗？我是说:当我有{}
在我的css样式表中，javascript警告alert(document.body.style.backgroundColor我希望有一个很好的解释，甚至是一个如何修复第一个例子的答案。
浏览 7提问于2014-09-27得票数 5
回答已采纳
我有以下代码：<h1 id="heading">My Site</h1>#heading{ color: #333333;当我在控制台的时候它给出：""$("#heading").<em
浏览 2提问于2016-06-17得票数 2
回答已采纳
"window.getComputedStyle()方法在应用活动样式表并解决这些值可能包含的任何基本计算之后，返回一个包含元素所有CSS属性值的对象。“
CSSStyleDeclaration返回一个Window.getComputedStyle()对象，该对象包含包含所有CSS属性名称的键值对。要获得特定CSS属性的解析值，可以使用getPropertyValue("prop
浏览 2提问于2021-06-07得票数 0
回答已采纳
我遇到了一种需要比较<p>缩进(<p>)值的情况。b="10pt"d="1cm"我想要一些e>d>c>b>a的操作符，现在我只能使用parseInt，我必须确保每个p.s. calc可能太难了，没有必要。
P.P.S.有比较相对长度的
浏览 0提问于2019-04-20得票数 0
回答已采纳
我正在尝试检查我的代码中是否应用了属性overflow-y: auto的css样式。例如，如果my有一个类"abcd"，而"abcd“有它的css overflow-y: auto，那么传递。虽然我已经为jquery找到了一个方法，但我没有使用它，我想为纯javascript (或Angular JS)找到一个方法，以确定元素是否具有给定的css属性。没有jquery我该怎么做呢？
浏览 20提问于2019-01-23得票数 0
回答已采纳
4回答
在我的页面上，我正在通过javascript更改一些css样式。当我试图提取一个已被继承的值时，它将变为空白。" id="FilterBox"> This is a test/<br /></div>
如果我看元素'document.getElementById(objnam
浏览 1提问于2009-07-23得票数 10
回答已采纳
请您解释一下，我如何获得通过css (例如，background:ulr())使用javascript或jQuery添加的html元素的正确路径。mouseover", function(e){
})i.style.background能找到正确的css
浏览 1提问于2018-02-02得票数 2
回答已采纳
1回答
如何测试css类属性？
、、、、
我们(我的团队)正在建设的设计系统，其中包括数字网页组件(如按钮，链接等)使用点燃元素。设计系统附带规范定义，在我们的文档站点上有文档记录。我们希望测试应用于web组件的CSS类属性。我们可以使用window.getComputedStyle()进行以下部分测试： const element = document.querySe
浏览 0提问于2020-06-29得票数 0
回答已采纳
我想要获取一个textarea元素的宽度，如Chrome inspect的元素选项卡中所示，如果css规则或元素的内联样式都不适用于该元素，或者它们被内联样式覆盖。我希望将跨度的max-width设置为文本区域的宽度值，然后将文本区域中的一行文本复制到跨度中，并确定该行是否换行以及如何换行。但是，当我使用jQu
浏览 25提问于2020-03-30得票数 0
回答已采纳
1回答
我使用以下代码获取元素的所有css样式：到目前一切尚好。我需要知道是否有样式，如果，是哪个类将CSS样式带到这个列表中。例如，我们查看结果行我需要知道是否有一个类应用这种样式，以及是否有一个类的名称有这个类，最好是从
浏览 0提问于2019-01-20得票数 1
回答已采纳
我想把下面的CSS添加到元素中- min-height: -webkit-calc(100% - 291px);}element.
浏览 6提问于2018-01-10得票数 1
回答已采纳
3回答
我的代码类似于以下代码：.banner.customer-service { background:url(//careers.jobvite.combanner.customer-service span {} height: calc我希望做的是这样的事情：
.banner.*
浏览 0提问于2019-03-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
