Wie kann ich auf gerenderte Schriftartinformationen in JavaScript zugreifen, wenn keine CSS-Definitionen vorhanden sind?

Zugriff auf die gerenderte Schriftart ohne CSS-Definitionen

Beim Überprüfen der Eigenschaften eines HTML-Elements können wichtige Informationen auffallen wie „font-face“ und „font-size“ fehlen bei Verwendung des JavaScript-Attributs „object.style“. Dies liegt daran, dass der Stil des Elements vom CSS der Webseite geerbt wird und das Attribut „object.style“ leer bleibt, bis diese Eigenschaften explizit definiert werden.

Es ist jedoch weiterhin möglich, die tatsächlich gerenderten Schriftartinformationen mit abzurufen die getComputedStyle-Methode. Hier ist eine JavaScript-Funktion, die dies erreicht:

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

Um diese Funktion zu nutzen, übergeben Sie einfach das Element, das Sie überprüfen möchten, und die Eigenschaft, die Sie abrufen möchten, z. B. „Schriftgröße“. Zum Beispiel:

css(object, 'font-size'); // Returns '16px' or similar

Es ist wichtig zu beachten, dass diese Methode in Internet Explorer 8 nicht unterstützt wird.

Live-Demo:

Klicken Sie hier So sehen Sie sich eine Live-Demonstration zu JSFiddle an: http://jsfiddle.net/4mxzE/

Code-Snippet:

// Retrieve the computed style information
console.log(
  getComputedStyle(document.getElementById('test'), null)
    .getPropertyValue('font')
);

// Define a custom CSS style for the element
document.getElementById('test').style.cssText = 'font-family: fantasy, cursive;';

// Append an HTML element to the document
document.body.appendChild(document.getElementById('test'));

#test {
  /* Custom font-face applied */
}

<!-- Element with rendered font -->
<div></div>

Das obige ist der detaillierte Inhalt vonWie kann ich auf gerenderte Schriftartinformationen in JavaScript zugreifen, wenn keine CSS-Definitionen vorhanden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!