CSS programmgesteuert in Firefox

aktualisieren Ich bin ein älteres Skript anpassen, um in IE, Chrome und FF zu arbeiten. Ich habe es in IE und Chrome funktioniert, aber Firefox scheint die Änderungen nicht auf die Stylesheets anzuwenden - Elemente, die unsichtbaren Stil bekommen, verschwinden nicht.CSS programmgesteuert in Firefox

folgender Code wird nun verwendet, um die Sichtbarkeit zu ändern:

<head> 
    <meta http-equiv='X-UA-Compatible' content='IE=10'> 
    <title>BootWiz.log.html</title> 
    <style type='text/css'> 
    h4 { 
     display: none; 
     font-size: smaller; 
     margin-top: 0; 
     margin-bottom: 0; 
     font-weight: normal; 
     color: Green; 
    } 

    h3 { 
     display: none; 
     font-size: smaller; 
     margin-top: 0; 
     margin-bottom: 0; 
     font-weight: normal; 
     color: Blue; 
    } 

    h2 { 
     display: block; 
     font-size: smaller; 
     margin-top: 0; 
     margin-bottom: 0; 
     font-weight: normal; 
     color: #7030A0; 
     background-color: #EBEBEB 
    } 

    h1 { 
     display: block; 
     font-size: smaller; 
     margin-top: 0; 
     margin-bottom: 0; 
     font-weight: normal; 
     color: Red; 
     background-color: #EBEBEB 
    } 

    .nav { 
     position: fixed; 
     width: 100%; 
     left: 0; 
     top: 0; 
     z-index: 100; 
     border-top: 0; 
     background-color: #FFFFFF 
    } 

    .cont { 
     position: relative; 
     top: 30 
    } 

    .success { 
     color: #ffff00; 
     background-color: #00cc00 
    } 

    .failure { 
     color: #ffffff; 
     background-color: #ff0000 
    } 

    </style> 
    <script type='text/javascript'> 
    var searchDone = false; 

    function ChangeVisibility(index, node) { 
     if (searchDone) { 
      alert('Need to reload the page.'); 
      window.location.reload(true); 
     } 
     if (node.checked) { 
      document.styleSheets[0].rules[index].style.setProperty('display', 'block'); 
     } else { 
      document.styleSheets[0].rules[index].style.setProperty('display', 'none'); 
     } 
    } 

    function Search() { 
     ..... 
    } 

    </script> 
</head> 

<body> 
    <div class="nav"> 
     <center> 
      <input type='checkbox' onClick='ChangeVisibility(0, this);' /> 
      <font style='color:Green'>Show Verbose</font> 
      <input type='checkbox' onClick='ChangeVisibility(1, this);' /> 
      <font style='color:Blue'>Show Info</font> 
      <input type='checkbox' checked='checked' onClick='ChangeVisibility(2, this);' /> 
      <font style='color: #7030A0'>Show Warning</font> 
      <input type='checkbox' checked='checked' onClick='ChangeVisibility(3, this);' /> 
      <font style='color: Red'>Show Error</font> 
      <input id='search' /><button onclick='Search();'>Search Text</button> 
     </center> 
     <hr /> 
    </div> 
    <div class="cont"> 
     <font id='logContents' face='Verdana' size='3'> 

      <h2> 2015-08-25 08:27:43 <a class=success>Some Stuff started</a></h2>

Quelle

2016-08-02 Petr Osipov

Bitte entfernen Sie veraltete HTML-Tags ('

' und '') und vermeiden Sie alle Inline-Stile. Verwenden Sie CSS zum Zentrieren und Umspannen von Tags für Text. – Aziz

Ändern CSS ist nicht das, was Sie in der Regel tun wollen. Fügen Sie einfach eine neue CSS-Klasse

.hidden { 
    display: none; 
}

Und verwenden Sie, wenn Sie das Element ausblenden möchten.

Quelle

2016-08-02 09:36:30 tp4k

Danke, aber es würde Iterieren über mehrere hunderttausend Elemente zum Anpassen von Stilen, was versucht wurde, aber viel zu lange dauert ... –

ersetzen

document.styleSheets[0].rules[index].style.setProperty('display','block'); durch diese

node.style.setProperty('display', 'block');

Auch mag, würde ich wiederholen, was @ tp4k bereits geschrieben: Dynamisch ein CSS ist nicht die richtige Art und Weise des Umgangs Styling anpassen. Verwenden Sie stattdessen separate Stylesheets, um das zu erreichen, wonach Sie suchen.

Quelle

2016-08-02 09:46:29 Aer0

Es muss eine dynamische Anpassung sein - mehrere hunderttausend Elemente jedes Typs. –

Antwort

Verwandte Themen