Rahmen CSS mit JavaScript/jQuery Kräfte unerwünschte doppelte Anführungszeichen

I url('img.jpg') den Wert eines background-image CSS-Eigenschaft haben machen wollenRahmen CSS mit JavaScript/jQuery Kräfte unerwünschte doppelte Anführungszeichen

Was ich mache:

<div id="mDiv" style="background-image: url('img2.jpg')" ></div>

$("#mDiv").css("background-image","url('img.jpg')");

OR ohne jQuery:

document.getElementById("mDiv").style.backgroundImage = "url('img.jpg')";

Ergebnis:

<div id="mDiv" style="background-image: url("img.jpg")" ></div>

Gewünschtes Ergebnis:

<div id="mDiv" style="background-image: url('img.jpg')" ></div>

(Ich habe auch versucht style = machen '...', aber es wird auch zu doppelte Anführungszeichen umgewandelt ... Was kann ich tun zu erhalten das gewünschte Ergebnis)

Quelle

2016-08-26 Red Star

Ich glaube nicht, dass mit Ihrem Code etwas nicht stimmt. So zeigt der DOM-Viewer des Browsers Attribute an. – Barmar

Haben Sie ein Problem wegen des Angebots? – Barmar

Die Anführungszeichen in der URL sind nicht erforderlich. Sie können einfach 'background-image: url (img2.jpg)' – Dekel

document.getElementById("mDiv").style.backgroundImage = "url('img.jpg')";

Was Sie verstehen müssen, ist, dass der Inhalt Ihrer Seite im Browser nicht als Markup-Zeichenfolge gespeichert wird. Die Seite ist eine Hierarchie von Objekten und Eigenschaften.

Wenn Sie die oben oder die entsprechenden Versionen mit setAttribute/attr() die anderen Antworten auszuführen sind darauf hindeutet, wird der Browser speichert url('img.jpg') überall nicht unbedingt einen String: es ist das Parsen es die URL img.jpg und dass halten zu extrahieren. Die Information darüber, ob Sie einfache Anführungszeichen, doppelte Anführungszeichen oder keine Anführungszeichen verwendet haben, um die URL zu umbrechen, ist für immer verschwunden.

Wenn Sie dann nach einem serialisierten Formular als Markup fragen, zum Beispiel indem Sie das style Attribut lesen oder das innerHTML des Dokuments greifen, muss der Browser einige Markups aus den Eigenschaften neu erstellen. Der Browser kann alle Arten von willkürlichen Möglichkeiten wählen, um diese Daten zu serialisieren, solange die Ausgabe den gleichen Dokumentinhalt darstellt.

Es gibt keinen Grund zu erwarten, dass die Ausgabe dem Markup sehr ähnlich sieht.Insbesondere kann der Browser verschiedene einfache oder doppelte Anführungszeichen wählen; Es kann Attribute anders ordnen; es kann verschiedene Leerzeichen enthalten; und so weiter.

Result: 
<div id="mDiv" style="background-image: url("img.jpg")" ></div>

Dies ist jedoch nicht gültig HTML, wegen der verschachtelten Anführungszeichen. Ich denke, Sie schauen sich das Element im DOM Inspector an, das in manchen Browsern nicht unbedingt eine HTML-gültige Ausgabe anzeigt. Wenn Sie die innerHTML des übergeordneten Elements erhalten, werden Sie sehen, dass die inneren Anführungszeichen zu " maskiert werden.

Quelle

2016-08-26 23:27:54 bobince

Aber das Bild wird nicht angezeigt, und sobald ich die doppelten Anführungszeichen in einzelne Anführungszeichen bearbeite, erscheint es (ja durch das Entwicklerwerkzeug in Chrome) –

@RedStar, versuche meine Antwort! – Ehsan

Sie haben ein anderes Problem. Das Setzen von 'backgroundImage' auf' url ('img.jpg') 'oder' url ("img.jpg") 'ist absolut identisch, nach dem CSS-Standard und jedem Browser. – bobince

Versuchen:?

$("#mDiv").css("background-image","url(img.jpg)");

Quelle

2016-08-26 23:03:20 Morgs

Ergebnis: '

' So funktioniert es nicht, fügt immer noch die Anführungszeichen innerhalb url() –

Überprüfen Sie das Beispiel hier: [jsfiddle] (http: // jsfiddle.net/Q5HDu/308/) Nur als eine Anmerkung, erhalten Sie keine einfachen Anführungszeichen überall in Ihrem HTML. Die Browser standardisieren alles in doppelten Anführungszeichen. Es sei denn in einem Satz ... Aber nicht als Teil der HTML-Formatierung, also ist mit Ihrem Code buchstäblich nichts falsch. – Morgs

Sie müssenverwendenwie folgt aus:

$("#mDiv").attr({style:"background-image: url(img.jpg)"});

Schlusscode:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      div { 
 
       width: 200px; 
 
      } 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
     <div id="mDiv" style="background-image:url(http://godfatherstyle.com/wp-content/uploads/2016/02/water-drops-on-flowers-wallpapers.jpg)" >Ehsan</div> 
 
     <button>Change</button> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function(){ 
 
       $("button").on("click",function(){ 
 
        $("#mDiv").attr({style:"background-image:url(http://godfatherstyle.com/wp-content/uploads/2016/02/Colourful_Flower_01.jpg)"}); 
 
       }) 
 
      }) 
 
     </script> 
 
    </body> 
 
</html>

Quelle

2016-08-26 23:09:35 Ehsan

ich das denken, wird das tun

$("#mDiv").attr({style:"background-image: url('img.jpg')"});

Quelle

2016-08-26 23:11:32

Ich habe nicht abgewunken !!! (und ja, es funktioniert, erwarte, dass es den Rest des Style-Attributs vermasselt. Ergebnis: '

') –

Versuchen Sie, den Backslash-Escape-Zeichen \ oder unter Verwendung einer mit separate Variable, um zur Wurzel des Problems zu gelangen:

$ ('mDiv'). Css ('background-image', 'url (' + imageUrl + ')');

Quelle

2016-08-26 23:13:17

Rahmen CSS mit JavaScript/jQuery Kräfte unerwünschte doppelte Anführungszeichen

Antwort

Verwandte Themen