FirefoxでプログラムでCSSを更新する

IE、Chrome、FFで動作するように古いスクリプトを調整しています。私はそれをIEとChromeで動作させましたが、Firefoxはスタイルシートに変更を適用しないように見えます - 見えないスタイルを取得するアイテムは消えません。FirefoxでプログラムでCSSを更新する

次のコードは、可視性を変更するために使用されるようになりました：

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

出典

2016-08-02 Petr Osipov

廃止予定のHTMLタグ（ '

'と ''）を取り除き、インラインスタイルを避けてください。テキストをタグにセンタリングし、 'span 'タグを付けるには、CSSを使用します。 – Aziz

変更CSSを使用すると、通常は何をしたいのかではありません。ただ

.hidden { 
    display: none; 
}

新しいCSSクラスを追加し、要素を非表示にしたいときに使用します。動的にCSSを調整するスタイリングを処理する適切な方法ではありません。

出典

2016-08-02 09:36:30 tp4k

ありがとうございます。しかし、試行されましたが長すぎるスタイルを調整するために、数十万の要素を反復することになります... –

この

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

を通じて

document.styleSheets[0].rules[index].style.setProperty('display','block');を交換してください。また、私はtp4k @すでに書いたものを繰り返すようにしたいと思います。代わりに、あなたが探しているものを達成するために、分離されたスタイルシートを使用してください。

出典

2016-08-02 09:46:29 Aer0

各タイプの数十万の要素が動的に調整されている必要があります。 –

FirefoxでプログラムでCSSを更新する

答えて

関連する問題