Javascript: Zugriff auf CSS-Attribute einer CSS-Klasse? - #194466 (HTML, CSS und Javascript)

Gustl

2022-08-25 17:02

User since
2011-01-27
441 Artikel
BenutzerIn

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 )

<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)