Bettie: Stylesheet durchsuchen

SELF-Forum

Stylesheet durchsuchen

Bettie
– Informationen zu den Bewertungsregeln

Guten Tag,

im folgenden HTML Text sind im Haeder ein paar Style-Anweisungen die mit einem Javascript durchsucht werden sollen. Das Javascript wird im body-Tag gestartet. Alles funktioniert auch gut!!!

Nur wenn ich die Stylsheets in ein separate Datei einbinde und mit <style>@import url...</style> oder <link rel="stylesheet...> einbinde, findet sie das JS-Script nicht.

Das ich die externen Stylesheets (im Beispiel weggelassen) richtig einbinde, erkenne ich daran, das der Browser die entsprechenden Formatanweisungen durchführt. Nur das JS-Script findet die ext. Style-Anweisungen nicht.

Hat jemand ein Erklarung?

Danke, Bettie

  
<head>  
  
  <styl>  
    /* erste Gruppe von Stylesheet Anweisungen */  
    #such_mich_1  {background:black}  
    .finde_mich_1 {background:black}  
  </style>  
  <styl>  
    #such_mich_2  {background:black}  
    .finde_mich_2 {background:black}  
  </style>  
  
  <script>  
    function suche_stylesheet_anweisung(gesuchter_selectorText)  
    {  
      for (i=0; i<document.styleSheets.length; i++)  
      {  
        for (j=0; j<document.styleSheets[i].cssRules.length; j++)  
        {  
          var current_selectorText = document.styleSheets[i].cssRules[j].selectorText;  
          var Ausgabetext = "i=" + i + "; j=" + j + "; Seletorname=" + current_selectorText;  
          if ( current_selectorText== gesuchter_selectorText )  
          {  
            Ausgabetext += "; Hurra - gefunden";  
          }  
          alert(Ausgabetext)  
        }  
      }  
    }  
  </script>  
</head>  
  
<body onload='suche_stylesheet_anweisung(".finde_mich_1")'>  
  
</body>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Stylesheet durchsuchen

    Bettie
    – Informationen zu den Bewertungsregeln

    Sorry,

    <styl>

    die fehlenden "e" bei <style> sind nur beim editieren der Nachricht verloren gegangen!!!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Stylesheet durchsuchen

    Georg
    +1 Informationen zu den Bewertungsregeln

    Guten Tag,

    Das ich die externen Stylesheets (im Beispiel weggelassen) richtig einbinde, erkenne ich daran, das der Browser die entsprechenden Formatanweisungen durchführt. Nur das JS-Script findet die ext. Style-Anweisungen nicht.

    Hat jemand ein Erklarung?

    Nun bei mir hat spontan nicht mal die normale Geschichte am Anfang geklappt bis ich rausfand was der Grund war.

    http://www.javascriptkit.com/domref/stylesheet.shtml

    im IE lautet es rules statt cssRules ;)

    Wie dem auch sei auf der Seite findest du auch die Lösung zu deinem Problem.

    Aber dennoch solltest du überlegen wie du diese Funtion so umbaust, dass sie auf alle Browsern funktioniert

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Stylesheet durchsuchen

      Bettie
      – Informationen zu den Bewertungsregeln

      im IE lautet es rules statt cssRules ;)

      das rules/cssRules Problem habe ich gelesen. Denke mit "if (!document.rules)" und/oder "if (!document.cssRules)" lässt sich das lösen ...

      Aber dennoch solltest du überlegen wie du diese Funtion so umbaust, dass sie auf alle Browsern funktioniert

      Mir steht so einfach kein IE zur Verfügung. Im Moment habe ich ein reines Firefox-Problem. Ext. Stylesheets finde ich nicht unter document.cssRules.

      Mir ist bewusst, das ich nach Lösung des FireFox Problems auch noch Probleme bei IE haben könnte (möglicherweise versteckt der IE externe StyleSheets an anderer Stelle).

      Danke trotzdem - deine URL ist gut, Bettie

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Stylesheet durchsuchen

        Georg
        – Informationen zu den Bewertungsregeln

        Mir steht so einfach kein IE zur Verfügung. Im Moment habe ich ein reines Firefox-Problem. Ext. Stylesheets finde ich nicht unter document.cssRules.

        ließ mal die Punkte zu

        ownerNode
        ownerRule
        owningElement
        parentStyleSheet

        je nachdem wie du das dokument einbindest musst du anders damit umgehen.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Stylesheet durchsuchen

          Georg
          – Informationen zu den Bewertungsregeln

          So sollte es in allen klappen

            
<script>  
	function suche_stylesheet_anweisung(gesuchter_selectorText) {  
		for (i = 0; i < document.styleSheets.length; i++) {	  
			if(document.styleSheets[i].cssRules) {  
				var rule;  
				rule = document.styleSheets[i].cssRules;  
			}  
			else {  
				rule = document.styleSheets[i].rules;  
			}  
  
			for (j = 0; j < rule.length; j++) {  
				var current_selectorText = rule[j].selectorText;  
				var Ausgabetext = "i=" + i + "; j=" + j + "; Seletorname=" + current_selectorText;  
				if ( current_selectorText == gesuchter_selectorText ) {  
					Ausgabetext += "; Hurra - gefunden";  
				}  
				alert(Ausgabetext)  
			}  
		}  
	}  
  </script>
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Stylesheet durchsuchen

        Georg
        – Informationen zu den Bewertungsregeln

        Bei mir funktioniert es aber :) Auch mit ext. css

          
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
	  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />  
  
[code lang=javascript]  
  <script>  
    function suche_stylesheet_anweisung(gesuchter_selectorText)  
    {  
      for (i=0; i<document.styleSheets.length; i++)  
      {  
        for (j=0; j<document.styleSheets[i].cssRules.length; j++)  
        {  
          var current_selectorText = document.styleSheets[i].cssRules[j].selectorText;  
          var Ausgabetext = "i=" + i + "; j=" + j + "; Seletorname=" + current_selectorText;  
          if ( current_selectorText== gesuchter_selectorText )  
          {  
            Ausgabetext += "; Hurra - gefunden";  
          }  
          alert(Ausgabetext)  
        }  
      }  
    }  
  </script>

        </head>

        <body onload='suche_stylesheet_anweisung(".finde_mich_1")'>

        </body>
        </html>
        [/code]

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln