Der Unterschied zwischen Bildpfaden in CSS und Javascript

Als ich heute Code eingegeben habe, wollte ich eine Funktion zum Wechseln von Avataren schreiben, aber hier kommt das Problem: Der Avatar wird einfach nicht angezeigt. Plötzlich hatte ich eine Idee, dass die Art und Weise, Bildpfade in CSS und JavaScript zu schreiben, unterschiedlich ist. ? ?

Hmm... Es ist so:

Eine neue „Bilder“-Datei im Stammverzeichnis erstellt und zwei Bilder bg1.png und bg2.png darin abgelegt

Zwei zusätzliche Ordner „style“ und „script“ werden im Stammverzeichnis erstellt, um die verwendeten .css-Dateien und .js-Dateien zu speichern.

index.html enthält

<div id="pic">
<p>开心吗</p>
</div>

Wenn ich möchte Um den Bildhintergrund des Tags mit der ID von pic festzulegen, würde ich Folgendes in die CSS-Datei schreiben:

#pic{ background:url(../images/bg1.png); }

, und in die JS-Datei würde ich den Pfad als images/bg1.png schreiben

Kurz gesagt:

(1) Bei JS-Skripten besteht HTML darin, das Skript in die Seite zu laden und zusammen zu analysieren (genau wie Ihr JS-Skript direkt auf dieser Seite geschrieben ist)

(2) Für CSS-Dateien wird nur ein Link bereitgestellt und nicht in die HTML-Seite geladen. In diesem Beispiel sucht HTML beispielsweise anhand des Links nach der erforderlichen Bilddatei in der CSS-Datei.

Der Bilddateipfad von CSS ist relativ zu sich selbst, und der Bilddateipfad von JS ist relativ zu der Datei, in der er sich befindet.