Wie fügt man mit Javascript und CSS ein textähnliches Element in ein Dokument ein?

Question

Ich möchte Javascript verwenden, um einige Elemente in die aktuelle Seite einzufügen. Dies ist zum Beispiel das Originaldokument: <p>Hallo Welt!</p>

Jetzt möchte ich ein Element in den Text einfügen, so dass er zu einem Element wird:

<p>Hallo <span id=span1>neue</span> Welt!</p>

I need the span tag because I want to handle it later.Show or hide. But now problem comes out, if the original page has already defined a strange CSS style on all <span> tags, the "new" I just inserted will not appear to be the same as "Hello" and "world". How can I avoid this? I want the "new" be exactly the same as the "Hello" and "world".

Answer 1

Nun, ich weiß nicht, wie sehr Sie mit der Verwendung eines <span>-Tags verheiratet sind, aber warum nicht so?

<p style="display: inline">Hello <p id="myIdValue" style="display: inline">new</p> World</p>

Auf diese Weise behält das eingefügte HTML dasselbe Styling wie das äußere, und Sie können immer noch einen Griff darauf haben, usw. Zugegeben, Sie müssen den Inline-CSS-Stil hinzufügen, aber es würde funktionieren.

Answer 2

Die einzige Möglichkeit, dies zu tun, besteht darin, entweder die anderen Spans so zu ändern, dass sie einen Klassennamen enthalten, und die Stile nur auf Spans mit dieser Klasse anzuwenden, oder die für alle Spans festgelegten Stile für Ihren neuen Span zu überschreiben.

だから、したなら。

span {
  display: block;
  margin: 10px;
  padding: 10px;
}

Sie könnten mit überschreiben:

<span style="display: inline; margin: 0; padding: 0;">New Span</span>

Answer 3

Überschreiben Sie einfach alle Spannenstile. Setzen Sie die Layout-Eigenschaften auf die Standardwerte des Browsers zurück und legen Sie die Formatierung so fest, dass sie vom übergeordneten Element geerbt wird:

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;
}

Dies sollte ausreichen, obwohl Sie eventuell !important hinzufügen müssen, wenn Sie keine id verwenden:

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

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

Answer 4

Fügen Sie die Klassendefinition, die in CSS definiert ist, in Ihre JavaScript-Version der <span> タグもあります。

<span class="class_defined_in_css">

(ここで、この <span> Tag wäre ein Teil Ihres JavaScript-Codes).

Answer 5

Warum geben Sie dem Absatz nicht eine Kennung und verwenden dann Javascript, um das Wort hinzuzufügen oder zu entfernen, falls erforderlich? Sicherlich wird die Formatierung des Absatzes beibehalten, wenn Sie das Wort "neu" einfügen, oder der Inhalt des Absatzes wird vollständig geändert.