getComputedStyle(element).getPropertyValue("--varName")在火狐中不起作用 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

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

1.2K5 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

4660 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

2.8K2 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.6K2 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.8K5 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 指向的是当前元素。

2.3K0 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方法。

5322 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方法不起作用

2.1K4 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

1.3K2 1

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

8003 0

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样式表也可以延迟加载吗，而且在加载成功后回调函数会给予通知。

1.2K2 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); 在使用的地方直接添加参数

3.9K3 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 完美支持）利弊

6231 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

9867 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 兼容性良好，有空试试吧？

1.3K2 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.5K1 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性能查询语法来检测语法：

1.4K2 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

2.7K1 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()方法，代码如下： ?

3.6K3 0

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

2K2 0

点击加载更多

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

兼容的话题：inline和block

getComputedStyle与currentStyle

jQuery源码解析之width()

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

读Zepto源码之样式操作

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

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

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

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

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

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

CSS3 变量 var() 使用小记

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

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

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

CSS3中变量的定义和使用

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

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

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐