Inline-CSS-Eigenschaftswert erhalten, selbst wenn es überschrieben wird

Question

Ich habe ein Element mit CSS-Inline-Code in einem "Stil" -Attribut. Ich füge diesem Element eine Klasse hinzu, die die Inline-Stile mit !important in einem CSS-Stylesheet überschreibt.

Frage: Wie kann ich einen Inline-CSS-Eigenschaftswert erhalten, auch wenn er von einem Stylesheet mit CSS überschrieben wird?

Wenn ich $("div").css("background-size"); verwende, erhält es den Wert aus dem Stylesheet-CSS, nicht das Inline-CSS, das überschrieben wurde.

Answer 1

Da jQuery berechneteStyles verwendet, um die auf Elemente angewendeten Stile zu erhalten. Ich glaube, dass das DOM-Element zugreifen könnte eine "Lösung" sein

console.log(
 
    
 
    $('p').get(0).style.fontSize 
 
    
 
);

p { 
 
    font-size:20px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p style="font-size:40px;">Hello World</p>

Sie jQuery-Funktionen und erweitern können.

jQuery.fn.cssInline = function(prop) { 
 
    
 
    var e = $(this[0]).get(0); // get DOM element 
 
    // convert to camelCase; this may not be required. 
 
    var propCamelCase = prop.replace(/-([a-z])/g, function (g) { 
 
      return g[1].toUpperCase(); 
 
     }); 
 
    
 
    return e.style[propCamelCase]; 
 
    
 
}; 
 

 
console.log($('p').cssInline('font-size')); 
 
console.log($('p').cssInline('fontSize')); 
 
console.log($('p').cssInline('width'));

p { 
 
    font-size:20px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p style="font-size:40px;">Hello World</p>