Jquery gibt in Firefox einen Nullwert für den Hintergrund zurück

Question

Ich habe folgendes HTML

jetzt in meinem jQuery versuche ich 'Hintergrund' zu bekommen, dann funktioniert es gut für Chrome, aber in Firefox liefert es einen leeren String zurück

    var cover_background = $('.js_fullheight').css('background');

dann gibt es "null" zurück. Bitte geben Sie mir also eine Lösung dafür. Ich möchte nicht 'background-image'.

Meine klare Frage ist, dass ich nur 'background' verwenden möchte, nicht 'background-image' oder 'background-color'. Und wie ich erwähnt habe, funktioniert dies in Chrome, aber nicht in Firefox, also möchte ich den Grund wissen, warum dies in Firefox nicht unterstützt wird?? Ist es mein Problem oder ein generisches Problem?

Answer 1

Ihr Hintergrund-Tag ist "inline" oder "shorthand" oder "all in one". Es ist jedoch ungültig. Sie können die richtige Verwendung auf MDN sehen:

background:      {1,2}
/* Hinweis: Vereinfachte Version, um ohne Scrollbalken zu passen */

Für maximale Kompatibilität möchten Sie es einfach halten und fortgeschrittene Funktionen separat hinzufügen:

background:    ;
background-size: ;
(usw.)

Wenn Ihre CSS-Eigenschaft nicht korrekt formatiert ist für den Browser, wird sie ignoriert. Das bedeutet, dass sie nicht einmal auf die Farbe zurückgreift und Sie keine Ergebnisse erhalten, wenn Sie auf die "background" Eigenschaft über JavaScript zugreifen.

Sie möchten nicht darauf vertrauen, dass .css("background") in der gleichen Reihenfolge zurückgegeben wird, wie Sie es in Ihrem CSS angegeben haben, daher sollten Sie jede Eigenschaft wirklich selbst abrufen:

var bg_color = $(element).css('background-color');
var bg_image = $(element).css('background-image');
// usw.

Answer 2

Probieren Sie das...

var backgroundProperty = $(".js_fullheight").get(0).style.background;

Ergebnis:

 "url("/website_blog/static/src/img/library/gauze-green-texture.jpg")
 repeat scroll 0px 0px / cover  rgb(8, 8, 8)"

DEMO

Bitte beachten Sie diese folgende Referenz REF