如何将css属性添加到innerhtml的span标签

【问题标题】：How to add css property to a span tag of an innerhtml如何将css属性添加到innerhtml的span标签
【发布时间】：2022-06-24 13:10:25
【问题描述】：

我有一个内部html

让我们说

<p [innerHtml]=\"billPayemnt\"></p> 并且账单支付包含以下代码

<p>
    <span>8218819999</span>
    <span>hello</span>
    </p>

问题是电话号码中断到第二行，所以我想将 white-space:nowrap 属性添加到电话号码标签。

我怎样才能做到这一点？？使用 jquery 或 javascript。

整个 html 内容来自我无法控制的 AEM 标签。

使用 ngafterviewinit 我得到了 innerhtml 但不确定如何更新css。

【解决方案1】：

const span = element.querySelector('p > span:first-of-type')

添加颜色样式

span.style.color = 'red'

【讨论】：

虽然这正确回答了这个问题，但在这种情况下，与简单的 CSS 选择器相比，使用 JavaScript 有点矫枉过正，因为问题是如何将 CSS 应用于 HTML 元素。
我明白了，但也许她有理由使用 javascript 来更新样式，也许元素颜色来自 API。我知道也有一个更好的解决方案来处理这个问题，但她询问了这种方法。
感谢您的帮助，但在获得 innerhtml 后我仍然不知道如何向其中添加 css 属性。我是 css 和 jquery 的新手。注意-我已经简要更新了这个问题。
不客气，要使用javascript添加样式，您需要获取您想要样式的元素，我们称之为span，每个HTML元素都有一个名为style的对象属性，通过它您可以获取或编辑样式，但是您应该编写如果它包含多个单词，则使用驼峰式大小写的 CSS 属性。
如需更多资源，请查看此链接。 developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style