Javascript: CSS Parsen um herauszufinden ob relativer Schriftgrößen verwendet werden

M

marlem

Bekanntes Mitglied
Hallo,

egal ob das CSS im HTML eingebettet wurde oder eine CSS-Datei verwendet wird.
Ich möchte mit Javascript herausfinden ob die Schriftgröße in em oder % angegeben wurde.
Hat jemand eine Idee wie das geht?
 
mihe7

mihe7

Top Contributor
Was heißt "die" Schriftgröße? Allein die Stylesheets auf der Seite hier enthalten 290 Angaben zur Schriftgröße...
 
M

marlem

Bekanntes Mitglied
Editieren geht nicht, deswegen Ergänzung:
CSS:
body{font-size: 110%;}
body{font-size: 2.5em;}
body{font-size: 10.0pt;}
body{font-size: 10.0px;}

% und em sind skalierbar, pt und px nicht und genau das möchte ich herausfinden.
Ist die Schriftgröße relativ oder fest angegeben.
 
mihe7

mihe7

Top Contributor
OK, ich formuliere mal anders:

Willst Du willst wissen, ob im CSS irgendwo eine bestimmte Einheit für die Schriftgröße verwendet wurde oder willst Du wissen, ob für ein Element effektiv eine relative oder feste Schriftgröße gilt?
 
M

marlem

Bekanntes Mitglied
ob im CSS irgendwo eine bestimmte Einheit für die Schriftgröße verwendet

Richtig! Ich möchte wissen ob im CSS die Einheiten pt oder px verwendet werden für die Schriftgröße,
weil dann ist die Schrift nicht skalierbar und somit auch nicht barrierefrei.
 
mihe7

mihe7

Top Contributor
Gut, dann musst Du einmal über die Elemente gehen (style-Attribut des Elements für inline-CSS) und einmal über die Stylesheets (styleSheets-Attribut von document).

Quick & Dirty für alle Stylesheets (mit Arrow-Functions und flatMap ließe sich das schöner schreiben):
Javascript:
var units = Array.from(new Set(Array.from(document.styleSheets)
    .map(function(sheet) { return Array.from(sheet.cssRules) })
    .reduce(function(arr,x) { return arr.concat(x, []) })
    .filter(function(e) { return e.style })
    .map(function(e) { return e.style.getPropertyValue('font-size') })
    .filter(function(fs) { return fs !== '' })
    .filter(function(fs) { return /^\d+[^0-9]+$/.test(fs) })
    .map(function(fs) { return fs.match(/[^0-9]+$/) })
    .reduce(function(arr, x) { return arr.concat(x, []) })))

Analog dann für alle Elemente.
 
M

marlem

Bekanntes Mitglied
Danke! Eigentlich habe ich gedacht, ich kenne mich mit Javascript inzwischen ganz gut aus, aber Dein Code ist für mich chinessisch rückwärts :)
 
mihe7

mihe7

Top Contributor
Das sieht wilder aus als es ist: document.styleSheets ist eine Liste, die erstmal zu einem Array umgewandelt wird, um filter/map/reduce verwenden zu können. Von jedem Stylesheet werden dann die cssRules genommen (wieder als Array), so dass ein Array entsteht, das Arrays enthält. Das reduce sorgt dann dafür, dass alle Elemente aller Arrays zu einem Array zusammengefasst werden. D. h. nach dem reduce hat man ein Array, das alle CSS-Regeln enthält.

Mit dem anschließenden filter werden nur solche Regeln betrachtet, die ein style-Attribut haben. Von diesen wird die font-size-Property genommen. Anschließend wird wieder gefiltert, damit nur nicht-leere font-size-Strings betrachtet werden (die Zeile kann eigentlich raus). Dann nochmals filtern: nur solche font-size Strings, die mit Ziffern beginnen und ohne Ziffern enden. Von diesen Strings wird dann nur das alphanumerische Ende genommen. Da durch beim match wieder Arrays entstehen, folgt am Ende nochmal ein reduce.

Da jetzt alle Einheiten ggf. zigfach auftreten würden, wird der ganze Spaß noch in ein Set umgewandelt, womit die Duplikate rausfliegen und zum Abschluss dieses Set wieder in ein Array.

BTW: es kann sein, dass das alles viel schöner und einfacher geht. Ich bin kein Browser-Profi.
 
M

marlem

Bekanntes Mitglied
Mit diesem Code:
Javascript:
vHTML = document.getElementsByTagName("*");

Bekomme ich alle HTML-Tags einer Webseite.
Wenn ich aber versuche von dem HTML-Tag die Fontsize zu bekommen in der Console bei den Developer-Tools
klappt das warum auch immer nicht!

Weiß jemand warum?
 
mihe7

mihe7

Top Contributor
Was heißt "von dem HTML-Tag"? Du bekommst ja eine Liste von HTML-Elementen.

Hier der Code von oben, angepasst auf die Elemente (JavaScript ist, wie ich festgestellt habe, sehr nachsichtig... Du könntest oben den Code entsprechend kürzen):
Javascript:
var units = Array.from(new Set(Array.from(document.getElementsByTagName("*"))
    .map(function(e) { return e.style.getPropertyValue('font-size') })
    .filter(function(fs) { return /^\d+[^0-9]+$/.test(fs) })
    .map(function(fs) { return fs.match(/[^0-9]+$/)[0] })))
oder mit Arrow-Functions:
Javascript:
var units = Array.from(new Set(Array.from(document.getElementsByTagName("*"))
    .map(e => e.style.getPropertyValue('font-size'))
    .filter(fs => /^\d+[^0-9]+$/.test(fs))
    .map(fs => fs.match(/[^0-9]+$/)[0])))
 
M

marlem

Bekanntes Mitglied
Wenn ich
Javascript:
var units = Array.from(new Set(Array.from(document.getElementsByTagName("*"))
    .map(function(e) { return e.style.getPropertyValue('font-size') })
    .filter(function(fs) { return /^\d+[^0-9]+$/.test(fs) })
    .map(function(fs) { return fs.match(/[^0-9]+$/)[0] })))

In der Console ausgebe und danach mir units anzeigen lasse
Javascript:
console.log(units)

Bekomme ich diese Liste:
  1. 0: "%"
  2. length: 1
  3. __proto__: Array(0)
    1. length: 0
    2. constructor: ƒ Array()
    3. concat: ƒ concat()
    4. copyWithin: ƒ copyWithin()
    5. fill: ƒ fill()
    6. find: ƒ find()
    7. findIndex: ƒ findIndex()
    8. lastIndexOf: ƒ lastIndexOf()
    9. pop: ƒ pop()
    10. push: ƒ push()
    11. reverse: ƒ reverse()
    12. shift: ƒ shift()
    13. unshift: ƒ unshift()
    14. slice: ƒ slice()
    15. sort: ƒ sort()
    16. splice: ƒ splice()
    17. includes: ƒ includes()
    18. indexOf: ƒ indexOf()
    19. join: ƒ join()
    20. keys: ƒ keys()
    21. entries: ƒ entries()
    22. values: ƒ values()
    23. forEach: ƒ forEach()
    24. filter: ƒ filter()
    25. flat: ƒ flat()
    26. flatMap: ƒ flatMap()
    27. map: ƒ map()
    28. every: ƒ every()
    29. some: ƒ some()
    30. reduce: ƒ reduce()
    31. reduceRight: ƒ reduceRight()
    32. toLocaleString: ƒ toLocaleString()
    33. toString: ƒ toString()
    34. Symbol(Symbol.iterator): ƒ values()
    35. Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
    36. __proto__: Object
Was kann ich nun mit diesem Ergebnis machen, damit ich die fontsize auslesen kann?
 
mihe7

mihe7

Top Contributor
Bekomme ich diese Liste:
Die kommt bei mir nur, wenn ich console.dir(units) ausführe. Kurz: das Array enthält ein Element nämlich units[0] und das ist "%".

Was kann ich nun mit diesem Ergebnis machen, damit ich die fontsize auslesen kann?
Es ist ein Array, das die Einheiten enthält. Mach damit, was immer Du willst :)

Unabhängig vom gezeigten Code: wenn Du die font-size eines Elements e haben willst: e.style.getPropertyValue("font-size")
 
M

marlem

Bekanntes Mitglied
Also, ich habe in meiner HTML-Datei folgendes gesetzt:
CSS:
<style>
    body{font-size: 110%;}
    </style>

Wenn ich nun in der Console das hier teste:
Javascript:
var vTag = document.getElementsByTagName("body");
[B]console.log(vTag[0].style.fontSize);[/B]

bekomme ich nichts zurück obwohl ich die fontsize gesetzt habe.

Wenn ich das hier mache:
Javascript:
var vTag = document.getElementsByTagName("body");
undefined
vTag[0].style.fontSize = '150%';
"150%"
[B]console.log(vTag[0].style.fontSize);[/B]
150%

wird die 150%, die ich gesetzt habe ausgegeben.

Frage:
Warum muss ich per Javascript erst die CSS-Fontsize setzen, damit ich sie auslesen kann?
 
mihe7

mihe7

Top Contributor
S. Kommentar #7.

Inline-Style:
HTML:
<elem style="font-size: 150%"/>
Hier bekommst Du den Stil über elem.style.fontSize zurück ("150%").

Dagegen musst Du für
CSS:
elem {
  font-size: 150%;
}
über die Stylesheets gehen.
 
M

marlem

Bekanntes Mitglied
Diese Lösung funktioniert fast:
Javascript:
const body = document.querySelector('body');
const bodyFontSize = getComputedStyle(body).fontSize;
console.log(bodyFontSize);

Problem von der Lösung:
Ich setze die Fontsize in Prozent und die Lösung gibt Pixel zurück.
 
mihe7

mihe7

Top Contributor
Deine Antwort auf #5 war:
Ich möchte wissen ob im CSS die Einheiten pt oder px verwendet werden für die Schriftgröße,
Mit dem gezeigten Code kannst Du feststellen, welche Einheiten im CSS (sowohl im Stylesheet als auch im inline Style) verwendet werden, also auch ob pt oder px.

Wenn Du jetzt etwas anderes willst, müsstest Du erklären, was.
 
M

marlem

Bekanntes Mitglied
Mit dem gezeigten Code kannst Du feststellen, welche Einheiten im CSS (sowohl im Stylesheet als auch im inline Style) verwendet werden, also auch ob pt oder px.

CSS:
<style>
    body{font-size: 110%;}
    h1{font-size: 110px;}
    </style>

Ich habe jetzt also % und px.

Dein Code:
Javascript:
var units = Array.from(new Set(Array.from(document.getElementsByTagName("*"))
    .map(function(e) { return e.style.getPropertyValue('font-size') })
    .filter(function(fs) { return /^\d+[^0-9]+$/.test(fs) })
    .map(function(fs) { return fs.match(/[^0-9]+$/)[0] })))

Ergebnis:

Das ich px verwendet habe zeigt das Ergebnis nicht.
 
mihe7

mihe7

Top Contributor
Das ich px verwendet habe zeigt das Ergebnis nicht.
Ja, der Code von Dir verwendete Code zeigt die Einheiten, die im style-Attribut der Elemente auftreten.

Wenn Du also im HTML z. B. schreibst <h1 style="font-size: 12px;">, würde Dir der Code die px anzeigen. Die Angaben aus dem Stylesheet findest Du dagegen mit dem Code aus Kommentar #7.
 
M

marlem

Bekanntes Mitglied
Also gut, irgendwie bin ich in Javascript noch nicht so weit, dass ich das verstehe!
Wir lassen es! Danke für Deine Bemühungen!
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
J Mit Javascript eine Textdatei auslesen... HTML / CSS 28
S jqmath in javascript einbinden HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M Javascript: Farbkontrast überprüfen auf einer Webseite HTML / CSS 14
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
S Sicherheitsaspekt JavaScript HTML / CSS 3
M Webservice per Javascript ansprechen HTML / CSS 5
G php in javascript einbinden HTML / CSS 13
E Javascript/ Eventlistener ohne click? HTML / CSS 2
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
J JavaScript Woerter erkenen HTML / CSS 4
C Eclipse und Javascript full autocomplete? HTML / CSS 1
A DragDrop mehrerer Shapes im SVG per Javascript? HTML / CSS 0
M Javascript Tastatureingabe HTML / CSS 2
B javascript ausgabe in Text HTML / CSS 2
E Javascript Status Abfrage HTML / CSS 7
J Javascript im DOM einer Webseite ändern HTML / CSS 1
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
P JavaScript var an bean Setter übergeben HTML / CSS 2
Z Erste Website CSS3 HTML5 Javascript Jquery - Kritik HTML / CSS 3
P RSS FEED/ JSON/ Filter By Date/ Handlebars / Javascript HTML / CSS 0
B Externes Suchfeld - Javascript. REST? HTML / CSS 0
S JavaScript und Ajax Erfahrene Gesucht!!!! HTML / CSS 0
V Javascript Adobe Acrobat XI Pro Formular Dropdown-Liste -> vorbelegte Checkboxen HTML / CSS 1
0 Javascript Leaflet Marker Popup mit Adresse HTML / CSS 1

Ähnliche Java Themen

Anzeige

Neue Themen


Oben