问题标签 [getcomputedstyle]

问题：给定一个 HTML 元素和可能的一些子元素，您能否（以及如何）确定它是或将在左/右流（内联）或上下流（块）中显示它的子元素？

例如，当您想要显示一个“dropcursor”来显示可以删除元素的位置时，就会出现这个问题，就像prosemirror-dropcursor所做的那样。如果元素处于内联流中，则光标应显示为垂直条，如果元素处于块流中，则光标应显示为元素上方/下方的水平条。如果您尝试将内容拖放到其中，您可以在任何文本编辑器中看到相同的行为。

有一些解决方案可能并不完美：

• 您可以查看 HTML 元素的类型及其默认值。Prosemirror 依靠正在显示的数据的模式来做这样的事情，当你不以与模型一致的方式显示内容时，它就会被欺骗。CSS当然可以覆盖它。

• getComputedStyle()用于查看和其他属性，在某种程度上模仿浏览器.display渲染算法正在做的事情。但这似乎可能非常复杂并且容易出错 - 考虑 CSS flexbox、grid 等。

• 您可以查看子元素的相对位置并推断流的方向，但同样，如果您有零个或一个元素，这将不起作用，并且无论如何可能有极端情况。

我只是想知道是否可以直接从浏览器中获取这种东西，或者是否有一种强大的和/或现成的方法来做到这一点。

我正在使用 VBA 中的 selenium，并且我存储了一个变量“post”来存储所有出现的特定元素，例如

我需要从元素中提取样式值

另外我需要在即时窗口中打印innerHTML，当我使用它时getAttribute("innerHTML")，它对我不起作用任何想法

好吧，我想在我的 js 代码中使用一些 css 变量。

这是我的 .css 文件和 .js 代码的一部分：

问题是，在 chrome、safari 和新 Edge 中，我的常量中的颜色值是正确的，但在 Firefox 中，它不起作用。

有任何想法吗？谢谢。

我对javascript相当陌生，并且一直在玩网络组件。我想访问 web 组件的 shadow DOM 中元素的 CSS color 属性。当我使用 getComputedStyle() 方法时，我无法访问在 connectedCallback 中运行的样式属性。

在这里，我试图访问颜色属性，在将值记录到控制台时它显示 RGB(0, 0, 0) 而在等待一毫秒然后记录时，RGB(0, 128, 0) 的正确值显示向上。为什么会这样？

我认为这是因为当我第一次运行该函数时尚未计算样式？对此有什么更优雅的解决方案？我怎样才能完全等到样式被计算出来才能运行我的函数，而不是我现在指定的任意时间？

JS

CSS

HTML

希望通过 JavaScript 获取特定元素的所有样式。getComputedStyle工作正常，但是我很困惑它返回什么类型的对象以及如何最好地迭代它。虽然其他一些答案建议使用循环对数组进行迭代，forEach因为大多数属性都是基于整数的，但返回的对象的其他属性是什么？

例如，使用以下命令记录元素的样式：

返回（为简洁起见）：

如果它真的是一个数组，那将是有意义的，因为许多属性都是基于索引的，但是在索引 319 之后它返回到字符串alignContent的键，是返回对象的下一个键。

此外，有没有办法只获取元素的声明样式而不是所有计算的样式？

我使用getComputedStyle(element)[type], 其中 element 是我的<p>标签并且type是fontSize, lineHeight, letterSpacing, fontFamilyor width。对于 fontSize 和 width，我得到数值，比如 16px 和 100%。这是我可以使用的东西，但是对于 letterSpacing 和 lineHeight 我得到normal了一个值。但我需要它作为一个数值，所以我可以加减它。我想使用 JS 来操作它。

在我的样式表中，它看起来像这样：

可以选择手动编写一个包含我已经设置的值的数组，然后使用它。但是我仍然会遇到 lineHeight 的问题，因为它继承了它。

这是一个例子：

我正在完成 HTML、CSS 和 JScript 游戏中的一些基本步骤，以便在 CHARACTER 和 ENEMY 之间进行非常简单的碰撞检测。

我正在寻找足够简单的东西来向 8 - 11 岁的孩子解释。

如果角色和敌人发生碰撞，则“游戏结束”。我尝试了各种方法，但需要一些代码帮助和 getComputedStyle 方法的解释以及它获得的属性，以便我有效地创建主 if 语句。

这是相关的 if 函数：

这是声明变量的setInterval 函数（我在 if 函数中使用）。我已经基于 varcharacterTop 变量和enemyLeft 创建了 var CharacterRight 变量，但它似乎不起作用，或者我不确定我是否以正确的方式进行操作。

在当前设置中发生了一些奇怪的事情。如果我离开角色并且不移动它，则（敌人）弹跳 5 次后游戏结束，即使根据 if 函数，characterTop 根本没有变化。那么那里发生了什么？

请在回答中：

a）根据我现有的代码提出碰撞检测的建议解决方案

b) GetComputedStyle 和 getProperties 的说明及其文档。例如，如果 characterTop 没有改变（如果我不移动角色）它怎么会突然输出“游戏结束”，这表明 characterTop 是 ==enemyLeft。

c) 简单碰撞检测的最佳实践（对于绝对初学者的学习概念，并根据现有代码提出最简单的解决方案）

为了完整起见，这里是整个代码：

HTML

CSS

JavaScript

我看过这个文档，但它似乎没有引用对象。 https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

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

到目前为止（在 Chrome 和 Firefox 中），颜色值似乎总是以易于解析的格式rgb返回：rgba

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

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

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

编辑：

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

客观的

• 使用 getComputedStyle 来识别分配给页面中文本的 CSS 字体粗细，并将其作为文本记录到 P 标记/s 开始处的跨度中。

原因

• 创建一个书签供个人使用，以识别在哪里使用 CSS 以直观地应用粗体/粗体文本。然后可以确定是否应该用 HTML strong 替换 CSS。

问题

• 仅适用于页面中的第一个 P 标签。
• 替换现有文本而不是添加到现有单词。

到目前为止的代码

• 这可能吗，如果没有，问题就结束了。
• 有没有更好的方法来实现这一目标？
• 需要在 JavaScript 而不是 jQuery 中。

我想获取计算数据并显示在另一个组件中。但是，我将计算结果放在我的 app.vue 中，并尝试在我的 ChangeBackground.vue 中使用 :style="inputStyles" 调用这个计算结果。但是当我尝试这样做时，它显示错误“属性或方法“inputStyles”未在实例上定义但在渲染期间被引用”有人可以帮助我吗？谢谢

您可以在此处访问代码： https ://codesandbox.io/s/hardcore-morning-5ch1u?file=/src/components

这是代码：

应用程序.vue

更改背景.vue