开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

getComputedStyle(element).getPropertyValue("--varName")在火狐中不起作用

getComputedStyle(element).getPropertyValue("--varName")在火狐中不起作用是因为火狐浏览器对CSS变量的支持存在一些限制。

CSS变量（也称为自定义属性）是一种在CSS中定义的变量，可以在整个样式表中重复使用。使用CSS变量可以提高代码的可维护性和灵活性。

然而，火狐浏览器在某些情况下可能无法正确解析和应用CSS变量。具体来说，getComputedStyle(element).getPropertyValue("--varName")方法无法获取到CSS变量的值。

解决这个问题的方法是使用其他方式来获取CSS变量的值，例如通过element.style.getPropertyValue("--varName")来获取。这种方法可以直接从元素的内联样式中获取CSS变量的值。

另外，为了确保在不同浏览器中都能正常使用CSS变量，可以考虑使用PostCSS等工具进行预处理，将CSS变量转换为浏览器支持的语法。

总结起来，getComputedStyle(element).getPropertyValue("--varName")在火狐中不起作用是因为火狐浏览器对CSS变量的支持存在限制。可以通过使用element.style.getPropertyValue("--varName")或者使用预处理工具来解决这个问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:$locationChangeStart在火狐中不起作用 Angular $filter在火狐和safari中不起作用 angular.element().scope函数在fb脚本中不起作用 element.select()在火狐中不起作用 JavaScript在Safari中不起作用，但在火狐和Chrome中起作用 jQuery $(element).css('gap')在Firefox中不起作用 jQuery lenght在火狐中不起作用 JQuery可编辑数据网格在火狐中突然不起作用 jQuery表格扩展器在Chrome中有效，但在火狐中不起作用 Jscript element.style在script.js中不起作用(visual studio代码)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

利用JavaScript获取浏览器计算后的样式

getComputedStyle(element[, pseudoElt])方法 element用于计算样式的标签;pseudoElt可选指定一个伪元素进行匹配。对于常规的元素来说可省略。...window.getComputedStyle(element[, pseudoElt])方法获取标签在浏览器里计算的样式。实例 <!...(box, null).getPropertyValue("height")); console.log(window.getComputedStyle(box, null).getPropertyValue...> 关于defaultView 在许多JavaScript框架, getComputedStyle是通过 document.defaultView 对象来调用的。...但有一种情况，你必需要使用 defaultView, 那是在火狐3.6上访问子框架内的样式 (iframe)——资料来源mozilla jQuery部分源代码 ? 实例 <!

9125 0

兼容的话题：inline和block

html; charset=utf-8"/> function swiDisplay(meO){ /*马克-to-win：火狐和...IE8中me.style.display开始时是没有值的，因为style="color:red;position:relative;" 如果是style="color:red;position:relative...(me1).getPropertyValue('display') is"+ window.getComputedStyle(meO).getPropertyValue('display')); ...meO.style.display=window.getComputedStyle(meO).getPropertyValue('display'); } if (meO.style.display...=="block"){ /*注意下面的语句，可以变成style.display=""，就是说inline 和“”效果是一样的，这只是在set时，get时getComputedStyle 会返回inline

3630 0

getComputedStyle与currentStyle

2.语法 var style = window.getComputedStyle(element[, pseudoElt]); element是用于计算样式的dom节点，pseudoElt是一个用于匹配伪类的字符串...} getTheStyle(); 3.与element.style的区别首先，element.style属性不仅可读，而且可写，而getComputedStyle获取的样式是只读的...就拿csdn博客这个页面举例来说，我们注意一下document.body的background样式，如下图 body的内联样式为空，但在内部样式表中设置了background样式，在控制台下用分别用style...和element.currentStyle主要存在以下区别： a.前者在很多浏览器上（except IE）都支持伪类，currentStyle完全不支持伪类； b.前者使用getPropertyValue...获取样式，后者使用getAttribute获取样式； c.getPropertyValue中传入的变量不支持驼峰标示，多单词的css属性名只能以“-”连接，比如getPropertyValue(“background-color

9252 0

jQuery源码解析之width()

可想而知，jQuery的$().width() 中也包含了对 borderBox 的判断。...： let a=document.getElementById("pTwo") a.ownerDocument.defaultView.getComputedStyle(a).getPropertyValue...('width') //55px 目标元素的所属 view，调用getComputedStyle()方法，获取目标元素的所有 CSS 属性，再调用getPropertyValue('width')，获取目标...borderBox 的判断在getWidthOrHeight()方法中，直接看过去： //获取 width 或 height //dimension:width/extra:"content"...(elem).getPropertyValue('width')) （2）是borderBox() 在（1）的基础上执行boxModelAdjustment()方法，去除 borderWidth、padding

3.1K2 0

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

getComputedStyle 与 getPropertyValue getComputedStyle 为何物呢，DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css...因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。...而 element.style 只能获取被这些样式表定义了的样式，而 getComputedStyle 能获取到所有样式的值（在不同浏览器结果不一样，chrome 中是 264，在 Firefox 中是...两者的用法完全一样，在 jQuery v1.10.2 中，使用的就是 window.getComputedStyle 。如下 ?...戳这里）所以在各浏览器中都会有代替的写法，比如说在标准浏览器中为 cssFloat，而在 IE678 中为 styleFloat 。

1.5K5 0

读Zepto源码之样式操作

(element) display = getComputedStyle(element, '').getPropertyValue("display") element.parentNode.removeChild...display = getComputedStyle(element, '').getPropertyValue("display") element.parentNode.removeChild(element...element) return return element.style[camelize(property)] || getComputedStyle(element, '').getPropertyValue...element) return return element.style[camelize(property)] || getComputedStyle(element, '').getPropertyValue...要注意，在 each 遍历中，this 指向的是当前元素。

2K0 0

利用原生JavaScript获取样式的方式小结

（论坛整理） 1、element.style:仅仅能获取写在元素标签中的style属性里的样式值，无法获取到定义在和通过载入进来的样式属性...3、element.currentStyle:IE 专用。返回的是元素当前应用的终于CSS属性值（包含外链CSS文件，页面中嵌入的属性等）。...('ele'); 2: window.getComputedStyle(ele,null).getPropertyValue('color'); 注意：属性名不支持驼峰格式。...ele.currentStyle; 8: } 9: 10: return style; 11: } 在JQuery中，经常使用css()获取样式属性。...其底层运作就应用了getComputedStyle以及getPropertyValue方法。

2922 0

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

window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。...根据MDN的文档， window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数，一个是元素本身另一个是元素的伪元素。...:before').getPropertyValue('font-size');//获取before伪元素的字号大小关于这个方法，详解可以参考这篇文章：获取元素CSS值之getComputedStyle...，这个值越大则样式优先级越高，但是值不能超过当前样式表规则（cssRules）长度（CSS中先定义的样式总是会被后定义的覆盖就是这个缘故。）...StyleSheetList，然而第一个如果是link而不是style,前面讲过此时无法获取对应的cssRules，则document.styleSheets[0].cssRules为null，insertRule方法不起作用

1.8K4 0

Hugo博客目录放在侧边 | PaperMod主题

之前我自己写过把目录放到侧边，也成功了，不过后来换了另一种方式，原因是我曾经在PaperMod的github库提了discussions，希望作者能把目录放在侧边，没想到半个月后作者竟然回复了，而且还附上了代码...(element) - window.pageYOffset) < window.innerHeight/2) { return element;...).classList.remove('active'); } }) }, false); const main = parseInt(getComputedStyle...(document.body).getPropertyValue('--article-width'), 10); const toc = parseInt(getComputedStyle(document.body...).getPropertyValue('--toc-width'), 10); const gap = parseInt(getComputedStyle(document.body).getPropertyValue

3983 0

【CSS】470- 是时候开始用 CSS 自定义属性了

CSS 属性： /** * Gives a CSS custom property value applied at the element * element {Element} * varName..., varName){ const elementStyles = getComputedStyle(element); return elementStyles.getPropertyValue...(`--${varName}`).trim(); } /** * Writes a CSS custom property value at the element * element {Element...', 'white'); */ function writeCssVar(element, varName, value){ return element.style.setProperty(`--...('.breakpoints-data'); // GET const phoneBreakpoint = getComputedStyle(breakpointsData) .getPropertyValue

9832 1

5种你未必知道的JavaScript和CSS交互的方法

用JavaScript获取伪元素(pseudo-element)属性大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？...可以的，使用JavaScript也可以访问页面中的伪元素。...var color = window.getComputedStyle( document.querySelector('.element'), ':before').getPropertyValue(...'color');var content = window.getComputedStyle( document.querySelector('.element'), ':before').getPropertyValue...我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源，可你知道CSS样式表也可以延迟加载吗，而且在加载成功后回调函数会给予通知。

8932 0

dom-to-image失真，修改生成后的清晰度

return clone; }); function cloneStyle () { copyStyle(window.getComputedStyle...(element) { var style = window.getComputedStyle(original, element);...bottomBorder; } function px (node, styleProperty) { var value = window.getComputedStyle...= resolve; element.onerror = reject; element.src...return node; }); } } } })(this); 在使用的地方直接添加参数

2.7K3 0

CSS3 变量 var() 使用小记

在CSS中定义全局变量平时我们使用css来填充颜色时一般直接采取对于HEX色值即可，但这样往往会显得很囊肿而且不宜维护（如果需要整体更换色调会非常麻烦）对于主题色调来说，更改一次实现全局应用才是硬道理...首先我们在 :root 内定义变量名（注意定义该变量应在全局css中定义以确保全站使用），格式如下 :root { --theme-color-pri: #eb6844; --theme-color-sec...和 setProperty 来进行设置 //获取标签上style的var属性 element.style.getPropertyValue("--size"); //获取非标签上style的var...属性 getComputedStyle(element).getPropertyValue("--size"); //设置style上的var属性 element.style.setProperty...("--size", 20); 其他事项兼容老生常谈的问题了，在 Can I use 中查询各浏览器的兼容性，结果如下 Opera Mini / IE全挂233（好在新版 Edge 完美支持）利弊

2371 0

HTML5-类库系列事件与获取完成版样式

获取完成（渲染后）样式在IE下，对于获取渲染后的样式，使用currentStyle进行获取，而对于FF，使用的是getComputedStyle方法进行获取。两者的语法并不相同。...根据DennisHall的说法，使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用。...但是在以前3.6版本的火狐浏览器当中，对于获取frame框架样式则仅仅支持document.defaultView的获取方式。...当然还有一个原因，就是没有人再去用3.6版本的火狐了~ 关于document.defaultView.getComputedStyle()方法的兼容问题：IE6~8不予以支持，需要注意~！...(element, null)[proName]; } return eleStyle; } 事件的兼容问题在DOM2级当中，提出了事件绑定的新方法-事件侦听器-addEventListener和attachEvent

7967 0

你知道这个 CSS 属性吗 —— getComputedStyle

Computed 在 Vue 中常用，是一种计算属性，里面的值是响应式的，但你知道 getComputedStyle 这个 CSS 属性吗？...从 Window.getComputedStyle() - Web API 接口参考 | MDN MDN 这里可以得知： let style = window.getComputedStyle(element...(document.documentElement).getPropertyValue('--mode').trim(); // mode结果是'"dark"'则表示黑夜主题，深色模式，黑暗风格，护眼模式...小结 getComputedStyle 属性和 CSS 伪类搭配有妙用！...能让 JS 读取 CSS 的信息，让 JS 获取 CSS 的能力~~ 而且 getComputedStyle 兼容性良好，有空试试吧？

6792 0

CSS自定义属性级联变量var()

variableName: value; 变量名称（variableName）使用规范：以"--"开头，后面可以是数字、字母、下划线、连字符、汉字等，但不能包含$、[、^、(、%等字符大小写敏感（另:CSS中，...看例子 JavaScript 操作 var rootStyles = getComputedStyle(document.documentElement); var value = rootStyles.getPropertyValue...('--variableName'); // 获取某个元素中定义的属性变量 value = element.style.getPropertyValue('--variableName'); //...设置变量 document.body.style.setProperty('--primary', '#7F583F'); // 读取变量 document.body.style.getPropertyValue

1.2K1 0

CSS3中变量的定义和使用

--breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-sl: 1600px; } 变量作用域作用域在全局和布局同时定义了一个变量...important > style="" > #id > .class > tagName > :root; JS操作变量 // 获取行内样式的变量名 element.style.getPropertyValue...("--variableName"); // 获取样式表里定义的变量 getComputedStyle(element).getPropertyValue("--variableName"); //...设置变量的值 element.style.setProperty("--variableName", value); 检测是否支持变量 CSS检测: 通过@supports性能查询语法来检测语法：

4262 0

dom-to-image库是如何将html转换成图片的

不过在使用这两个值时都需要服务端返回Access-Control-Allow-Credentials响应头，否则肯定无法跨域使用的。...获取原节点的样式，这个方法其实就是window.getComputedStyle方法，会返回节点的所有样式和值。...1.3.再接下来会根据前面获取到的标签列表，在iframe中创建对应结构的DOM节点，也就是会创建这样一棵DOM树：div -> span -> span。...(element) { // 获取原节点伪元素的样式 const style = getComputedStyle(original, element); // 获取伪元素的content...恢复包装元素在最开始的【检查和包装元素】步骤会替换掉节点类型不为1的节点，这一步就是用来恢复这个操作： function restoreWrappers(result) { while (restorations.length

7081 0

爬虫如何正确从网页中提取伪元素？

可以看到，在源代码里面没有请抓取我！这段文字。难道这个网页是异步加载？我们现在来看一下网页的请求： ? 网页也没有发起任何的Ajax 请求。那么，这段文字是从哪里来的？...XPath 没有办法提取伪元素，因为 XPath 只能提取 Dom 树中的内容，但是伪元素是不属于 Dom 树的，因此无法提取。要提取伪元素，需要使用 CSS 选择器。...首先我们来看一下，为了提取这个伪元素的值，我们需要下面这段Js 代码： window.getComputedStyle(document.querySelector('.fake_element'),'...:after').getPropertyValue('content') 其中，ducument.querySelector的第一个参数.fake_element就表示值为fake_element的...在 Selenium 要执行 Js，需要使用driver.execute_script()方法，代码如下： ?

2.8K3 0

一日一技：爬虫如何正确从网页中提取伪元素？

可以看到，在源代码里面没有请抓取我！这段文字。难道这个网页是异步加载？我们现在来看一下网页的请求： ? 网页也没有发起任何的Ajax 请求。那么，这段文字是从哪里来的？...XPath 没有办法提取伪元素，因为 XPath 只能提取 Dom 树中的内容，但是伪元素是不属于 Dom 树的，因此无法提取。要提取伪元素，需要使用 CSS 选择器。...首先我们来看一下，为了提取这个伪元素的值，我们需要下面这段Js 代码： window.getComputedStyle(document.querySelector('.fake_element'),'...:after').getPropertyValue('content') 其中，ducument.querySelector的第一个参数.fake_element就表示值为fake_element的...在 Selenium 要执行 Js，需要使用driver.execute_script()方法，代码如下： ?

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭