问题标签 [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.
javascript - 处理 document.styleSheets 时 rule.style 未定义
请记住，我仍在学习 JavaScript，所以请善待。
我有以下代码在网页中搜索包含 HTTP url 的任何 CSS。但是，有一个变量“v”有时可能是未定义的。错误“rule.style 未定义”
我该如何解决这个未定义的响应？我曾尝试使用条件，但没有运气。
我使用以下方法调用此函数：
css - 你的 CSS 属性的顺序会影响渲染时间吗？
我认为这是微不足道的快速问题。假设我编写了以下 CSS：
现在我在 Chrome 中打开页面并查看“计算”选项卡，同时我选择了 .card 并按字母顺序排列。每次加载页面时浏览器都会执行此操作，还是仅在打开“计算”选项卡时才会进行排序。此外，如果每次加载页面时都会进行排序（即 Chrome 在执行之前对 CSS 进行排序），是否可以通过对 CSS 文件中的属性进行排序来节省 Chrome 的额外工作，从而获得微小的性能提升？
我意识到我已经选择了 Chrome，但其他浏览器的工作方式类似
谢谢
javascript - 为什么样式不可见，并且样式标签在使用 CSSOM 的 insertRule 后无法重新附加
如果我使用 CSSOM 添加样式，insertRule我会注意到两件事。
在 Firebug 中查看时，添加的样式不会出现在 html 中。
如果样式标签被附加（例如：从头部移动到正文）到另一个元素（在 Firefox 和 Chrome 中发生），则添加的样式不起作用。
如果在附加标签之后添加样式，那么它们确实有效。他们仍然没有显示在 Firebug 中。附加工作表时必须重新分配（重新分配？），这使它显得更加陌生。
由于未在 Firebug 中显示，这可能是 Firebug 的一个怪癖，但不会动态添加的常规样式会显示出来。
对于附加后不起作用的样式，我想知道这是否是标准，因为这发生在 Firefox 和 Chrome 中。看看标准，我什么也没看到。除非我只是不理解他们。
为清楚起见进行编辑：
如果您将<style></style>标签附加到<head></head>html 中，您可以使用 应用样式style.sheet.insertRule(styleString)，并且添加的样式将应用于文档。
如果您已经将其附加<style></style>到<head></head>like <head><style></style></head>，并尝试附加<style></style>到其他地方，就像<div><style></style></div>所有样式都丢失一样，请不要再次应用。
这是正常的吗？
代码流程：
作品：
- 追加
<style>任何地方 - 添加样式
style.sheet.insertRule(styleString)
不起作用：
- 追加
<style>任何地方 style.sheet.insertRule(styleString)用to添加样式<style><style>在其他地方追加相同
我的另一个问题是即使它们已应用于文档，添加的样式<style></style>也不会显示出来。Firebug
编辑更清晰：
如果我在style未修改样式表的情况下重新附加元素，则样式将保留：
但是，如果我用 JS 更改了样式表，则更改将被撤消：
javascript - JS 访问 XHR 文档中的样式表
如果我使用 javascript 检查当前文档document.styleSheets，我将StyleSheetList返回一个对象，其中列出了文档的所有当前样式表。
我想对通过 XHR 获取的文档中的内联样式表执行相同的操作。我可以得到 XHR 的文档。解析后的文档有一个节点接口，我可以在 javascript 中查看并查看内联<style>标签，但 xhrDocument.styleSheets 的长度始终为 0。
是否有另一种方法可以解决在 javascript 中解析 CSS 的不足？理想情况下可以跨浏览器工作的东西。我也不想将样式表注入到当前文档中，除非我能以某种在任何情况下都不会影响当前文档的惰性方式这样做。
javascript - scrollTop 在高 dpi 设备上返回 chrome 中的整数：有没有办法获得非舍入值？
诸如scrollTopor之类的属性scrollLeft，以及现在在 CSSOM 视图模块中标准化的许多其他“旧”（dhtml）属性，在高 dpi 设备中仍然返回整数而不是双精度（如草案中所指定）。
例如，在此类设备上，如果 HTML 元素完全向下滚动，
element.scrollTop + element.clientHeight则即使在视觉上它完全滚动也是如此1。element.scrollHeight我想是因为返回的偏移量被四舍五入了。
是否有另一种方法可以scrollTop（不仅在主体上，而且在任何可滚动元素上）完成其小数部分？
javascript - 在 JS 执行之前应用 CSS 字体
我正在构建在 HTML 主体之上使用画布表面的 Web 应用程序。我使用画布在 SPAN 周围绘制边框。它工作得几乎完美，但我仍然在页面加载时遇到问题。
我使用了 chrome 调试器并注意到 css 文件中的字体样式是在脚本执行后应用的，这会混淆 DOM getElementRects 方法并导致在页面完全呈现后跨度边框位置错误。下面我附上截图。
你知道如何解决这个问题吗？我可以等到完全应用 css 样式吗？
javascript - 撤消或撤消对 CSS 样式表的更改
我有一个带有一些设置的网页，这些设置将允许用户更改网页的某些样式。我已经成功获得它，以便我可以更改 ID 和类的样式，但想知道是否有一种快速/简单的方法可以将其重置为最初的 css 样式表（很像 SVG 中的 baseVal 和 animVal） .
我的JavaScript如下：
如果不是，那么我相信为每个原始类创建一个数组会很容易，并且只需使用上述函数将其恢复为原来的样子。
我不想使用 jQuery，因为我以前从未使用过它，并且更愿意避免使用外部库。
javascript - 处理类似于?
在研究附加CSS与处理指令的优缺点时<?xml-stylesheet>，我遇到了一些问题。
假设我们有一个简单的 XHTML 文档（以application/xhtml+xmlMIME 类型交付并在 Web 浏览器中查看）：
然后我们有一个外部CSS文件（让它命名style.css并放在根目录中）：
首先，在 中script.js，我将这个 CSS 动态附加到一个link元素中：
然后脚本等待样式表完成加载并通过sheet属性到达它：
在此之后，脚本可以操作这个样式表，例如：
<?xml-stylesheet>但是现在，如果样式表附有处理指令，我无法弄清楚是否可以进行相同的操作：
首先，PI 似乎没有load事件，因此脚本无法知道样式表何时准备就绪。其次，没有像sheet属性这样的东西，所以你不能调用pi.sheet来访问样式表。
有什么办法可以克服这些困难并从脚本到与<?xml-stylesheet>PI 相关的样式表？