问题标签 [cssom]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
92 浏览

javascript - 画布已被带有 computedStyleMap().get("background-image") 的跨域数据污染

用 chrome 83 运行这段代码,第一次加载代码,一切正常,但是当我在浏览器中刷新页面时,我得到了 console.log:

为什么以及如何解决?

0 投票
1 回答
111 浏览

javascript - 浏览器中 CSS/HTML/JS 依赖的简单解释

我只是想验证我是否正确理解这一点。当浏览器收到一个 HTML 页面时,它会

  1. 开始将 HTML 解析为 DOM,并将任何样式标签解析为 CSSOM。

  2. 在遇到任何资源请求时,将这些请求发送到服务器。

  3. <script>遇到内联或外部标签时停止将 HTML 解析为 DOM

    • 例外:如果外部脚本标签包含 async 关键字,它将在 HTML 完全解析并完全构建 DOM 后运行。
  4. 任何脚本,无论是内联的还是外部的,只有在检查了整个 HTML 页面的任何样式信息并且该样式信息已转换为 CSSOM 后才会开始执行。

让我知道我是否应该在这些规则中添加任何内容。
或者,如果您有很好的资源来了解依赖关系以及如何优化它们,请分享。

0 投票
1 回答
47 浏览

javascript - 在 javascript 中更改 CSSOM css 样式属性

我正在尝试使用 style.cssText 来显示使用 javascript 的隐藏段落。这是我的代码:

html:

CSS:

js:

我也试过

请参阅代码笔: Codepen

请让我知道我应该如何解决这个问题。

0 投票
0 回答
17 浏览

javascript - 使用 document.getElementsByClassName 更改 css 样式

在 CSS 中,我试图将多个元素 id 分配给一个类,并使用带有 document.getElementsByClassName 和 style.display 的 javascript 将它们的显示属性更改为“none”。在 css 中,我使用了在本文中找到的 #content.myClass 。

我这样做是为了减少唯一选择器并保持我的代码高效。

html:

CSS:

js:

密码笔

它似乎没有使文本按预期消失。我应该如何处理这个?请不要使用 jQuery。

0 投票
0 回答
47 浏览

dom - Are Construction of DOM and CSSOM parallel?

In Critical Rendering Path, Is construction of DOM and CSSOM parallel? or Does construction of CSSOM process wait until construction of DOM will be ended? What is the sequence of Critical Rendering Path?

Thank you.

0 投票
1 回答
164 浏览

css - VisualViewport.offsetTop 和 VisualViewport.pageTop 有什么区别?

规范在这里,https://wig.github.io/visual-viewport/,但我无法理解其中的区别。

“初始包含块原点”坐标不是总是与布局视口坐标相同吗?

谢谢你。

0 投票
0 回答
23 浏览

css - 组合多个类选择器的性能

我是一名前端开发人员,我一直在阅读有关 CSS 选择器性能的文章,我想问你一个我在项目中使用很多来重用样式的做法"see attachment 1",我想知道:

  1. "see attachment 2"组合多个类选择器来设置 HTML 元素样式的优点和缺点是什么?
  2. 组合多个类选择器会影响网页的性能吗?
  3. 浏览器如何解释这种组合?识别这种模式是否需要更多时间或精力?还记得浏览器从右到左读取选择器吗?

应该注意的"attachment 1"是,这就是我的 CSS 样式表的方式,但是.btn.style1.btn.style2没有声明任何属性,因为它们是单独的"see attachment 3"

注意:在我的 CSS 样式表中,我不会声明以下选择器:

0 投票
0 回答
38 浏览

html - 如果没有完全构建的 DOM,CSSOM 如何知道元素的继承?

我读过很多关于 DOM 和 CSSOM 并行构建的文章。CSS 是渲染阻塞的,只是因为它阻止了渲染树的构建。<head>现在考虑这样一种情况,在这种情况下,在解析 HTML 文件时,在标记中遇到了指向外部样式表的链接。遇到样式表时会开始下载,但会继续解析 HTML。考虑在整个文档被解析之前完成下载,例如,在body标签中的某个地方。为简单起见,假设文档中没有脚本标签。

以下是我的疑问: a) HTML 的解析是否与主线程中的 CSS 解析一起继续?或者 CSS 解析是否会被阻塞,直到 HTML 解析完成,反之亦然?b) 考虑到 CSS 解析不会被阻塞,CSSOM 怎么可能在没有完全构建的 DOM 的情况下构建?考虑外部样式表中尚未解析的 HTML 元素的样式。解析器如何知道将该节点及其样式放在 CSSOM 中的何处(换句话说,它如何知道谁是该元素的父元素)?

0 投票
2 回答
49 浏览

css - css对象模型中禁用属性的样式

出于某种原因,我需要在反应组件中使用 CSS 对象模型传递 CSS 对象。在这里,我需要按钮在禁用和未禁用时的样式。就像我们做的:backgroundColor、borderRadius 等等。

这是我尝试使用它并希望以风格传递对象的地方。

0 投票
1 回答
248 浏览

javascript - getComputedStyle 的规范中是否指定了颜色格式?

我正在解析一个颜色字符串,以getComputedStyle从中获取、、、R和值。GBA

到目前为止(在 Chrome 和 Firefox 中),颜色值似乎总是以易于解析的格式rgb返回:rgba

但是,我无法在其MDN 页面上列出的任何规范中找到关于颜色格式的任何承诺。getComputedStyle

是否有任何颜色格式的保证getComputedStyle?还是完全取决于浏览器的实现?

我宁愿不必检查 HEX 和 HSLA 值(以及其他任何可能的值 - 我不完全确定)。


编辑

用于在控制台中测试颜色值的快速代码片段: