javascript - 如何使用 javascript 和 CSS 将类似文本的元素插入到文档中？

Question

我想使用javascript将一些元素插入当前页面。 比如原来的文档是这样的:

世界你好!

现在我想在文本中插入一个元素，使其变为:

你好新世界!

我需要span标签，因为我想稍后处理它。显示或隐藏。 但现在问题来了，如果原来的页面已经在所有的标签上定义了奇怪的CSS样式，那么我刚刚插入的“new”就不会显得和“Hello”和“world”一样了。我怎样才能避免这种情况？我希望“new”与“Hello”和“world”完全相同。

Answer 1

简单地覆盖任何跨度样式。将布局属性设置回浏览器默认值，并将格式设置为从父级继承:

span#yourSpan {
  /* defaults */
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;

  /* inherit from parent node */
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: inherit;
  word-spacing: inherit;
}

这应该足够了，但如果您不使用 id，您可能需要添加 !important:

<span class="hello-node">hello</span>

span.hello-node {
  /* defaults */
  position: static !important;
  display: inline !important;
  ...
}