Thread Javascript: Zugriff auf CSS-Attribute einer CSS-Klasse? (17 answers)
Opened by Linuxer at 2022-08-19 17:54

Gustl
 2022-08-25 17:02
#194466 #194466
User since
2011-01-27
441 articles
BenutzerIn
[Homepage]
user image
Ah, jetzt verstehe ich das.
Ist mir neu das man per Javascript direkt aus dem Stylesheet lesen kann.
Deshalb habe ich eine kleine Testseite erzeugt:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="w3.css">
</head>
<body>
<div class="w3-button">Testing</div>
<button onclick="change()">Change</button>
<button onclick="ask()">Ask</button>

<script type="text/javascript">
function change() {
document.querySelector('.w3-button').style.display = "block";
}

function ask() {
console.log("from file: " + get_Button_display_style("w3.css", ".w3-button", "display"))
console.log("style: " + window.getComputedStyle(document.querySelector('.w3-button'),null).getPropertyValue('display'))
}

function getStyleSheet(unique_title) {
for(var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if(sheet.href.indexOf(unique_title) > -1) {
return sheet;
}
}
}

function get_Button_display_style(unique_title, class_id_name, attribute) {
var stylesheet = getStyleSheet(unique_title)
if(stylesheet) {
var rules = stylesheet.cssRules;
for ( var i=0; i<rules.length; i++ ) {
var text = rules[i].cssText;
if ( text.indexOf(class_id_name) > -1 ) {
if ( text.indexOf(attribute + ":") > 0 ) {
if ( text.indexOf("@media" ) == -1 ) {
return rules[i].style.display;
}
}
}
}
}
}
</script>
</body>
</html>


Wieder was gelernt, danke :)

Jedoch verstehe ich nicht warum man das wissen möchte? Kannst du deinen Anwendungsfall bekannt geben?

Viele Grüße
Last edited: 2022-08-25 17:05:57 +0200 (CEST)

View full thread Javascript: Zugriff auf CSS-Attribute einer CSS-Klasse?