css-in-js - 如何使用 CSS-in-JS 定位元素？

Question

我无权访问我需要设置样式的元素，并且上面没有类名或 ID。如何使用 CSS-in-JS 定位 HTML 元素？例如：

svg path {
  fill: red;
}

Answer 1

当我遇到这种情况时，我正在查看开发工具、元素树选项卡并搜索具有类或 id 的父元素，然后我可以使用它来包装我需要选择的元素，例如：

<div class="parent">
  <svg />
</div>

然后你可以选择：

.parent svg path {
  fill: red;
}

但是，如果您没有父级并且想使用 javascript 设置 svg 样式，则可以执行以下操作：

var svg = document.querySelector('svg path')
svg.style.fill = 'red'

请记住，这将针对项目中的所有 SVG，如果这是您想要的，那么如果您只想设置这个 SVG 的样式并且您不想触摸更多内容，那么您将需要找到一个好的父级使用并定位该父元素内的 SVG，如果没有关闭父级查找页面 ID 或类似的东西。让我知道这是否有帮助，或者我可以进一步帮助您！