So fügen Sie mit JavaScript einen schwarzen Punkt vor einem Absatz hinzu-Front-End-Fragen und Antworten-php.cn

So fügen Sie mit JavaScript einen schwarzen Punkt vor einem Absatz hinzu

WBOY

Freigeben： 2023-05-29 13:01:38

Original

2786 Leute haben es durchsucht

Beim Webdesign und der Webentwicklung müssen wir manchmal einen kleinen schwarzen Punkt vor dem Text als Kennung der Liste hinzufügen. Dieser kleine schwarze Punkt wird oft als „Aufzählungspunkt“ bezeichnet. Er kann unsere Liste klarer und schöner machen und den Lesern helfen, den Inhalt des Artikels besser zu lesen und zu verstehen. In diesem Artikel stellen wir vor, wie Sie mit JavaScript Punktsymbole hinzufügen.

1. Punktsymbole in HTML hinzufügen

In HTML können wir eine ungeordnete Liste verwenden, um Punktsymbole hinzuzufügen. Vor jedem Element in der ungeordneten Liste steht ein Punkt:

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

Nach dem Login kopieren

Diese ungeordnete Liste wird wie folgt angezeigt:

Das erste Element#🎜 🎜#

Wenn Sie jedoch eine ungeordnete Liste zum Hinzufügen von Punkten verwenden, kann dies von CSS-Stilen beeinflusst werden und Typografie, sodass wir mithilfe von JavaScript flexiblere und anpassbarere Effekte erzielen können.

2. Verwenden Sie JavaScript, um Punktsymbole hinzuzufügen.

In JavaScript können wir eine wiederverwendbare Funktion zum Hinzufügen von Punktsymbolen erstellen. Das Folgende ist ein einfaches Codebeispiel:

function addBulletPoint(element) {
  var bullet = document.createElement('span');
  bullet.innerHTML = '&bull; '; // HTML中的圆点符号
  element.insertBefore(bullet, element.firstChild);
}

Nach dem Login kopieren

Im obigen Code verwenden wir die Methode createElement, um ein span-Element zu erstellen und dessen innerHTML auf ein Punktsymbol (HTML-Entität•) zu setzen. Als nächstes fügen wir dieses Element vor dem ersten untergeordneten Element des Zielelements ein, also einen kleinen schwarzen Punkt vor dem Text. Diese Funktion kann aufgerufen werden, indem die ID des Zielelements übergeben wird:

addBulletPoint(document.getElementById('list-item-1'));

Nach dem Login kopieren

Durch wiederholtes Aufrufen der Funktion addBulletPoint können wir Punktsymbole zu mehreren Elementen hinzufügen.

3. Verschönern Sie das Punktsymbol

Wenn Sie dem Punktsymbol ein schöneres Aussehen verleihen möchten, können Sie sein Erscheinungsbild mithilfe von CSS-Stilen anpassen. Sie können beispielsweise Punktsymbolen Farbe hinzufügen, die Schriftgröße festlegen, Abstände ändern und vieles mehr. Im Folgenden sind einige CSS-Stile aufgeführt, auf die Sie sich beziehen können:

.bullet-point {
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  margin-right: 5px;
}

Nach dem Login kopieren

Sie können diesen Stil auf das span-Element des von uns hinzugefügten Punktsymbols anwenden:

function addBulletPoint(element) {
  var bullet = document.createElement('span');
  bullet.innerHTML = '&bull; '; // HTML中的圆点符号
  bullet.className = 'bullet-point'; // 添加CSS样式
  element.insertBefore(bullet, element.firstChild);
}

Nach dem Login kopieren

Auf diese Weise Unser Kreis Die Punktsymbole werden schöner und attraktiver.

4. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man mit JavaScript Punktsymbole hinzufügt und wie man es durch CSS-Stile verschönert. Das Hinzufügen von Punktsymbolen kann unsere Artikel und Inhalte klarer und leichter lesbar machen und gleichzeitig die Ästhetik der Seite verbessern. Wenn Sie eine Website oder einen Artikel erstellen, sind diese Tipps sehr nützlich.

Das obige ist der detaillierte Inhalt vonSo fügen Sie mit JavaScript einen schwarzen Punkt vor einem Absatz hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!