在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標籤（'

'和''），並避免任何內聯樣式。使用CSS爲文本居中和「span」標籤。 – Aziz

更改CSS是不是你平時想做的事情。只需添加一個新的CSS類

.hidden { 
    display: none; 
}

而當你想隱藏元素中使用。

來源

2016-08-02 09:36:30 tp4k

謝謝，但它會導致迭代數以萬計的元素來調整樣式，這是嘗試過的，但太長了... –

更換

document.styleSheets[0].rules[index].style.setProperty('display','block');通過這個

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

另外，我想重複一下@ tp4k已經寫：動態調整CSS不處理造型的正確方法。相反，使用分開的樣式表來實現你正在尋找的東西。

來源

2016-08-02 09:46:29 Aer0

它必須是動態調整 - 每種類型的幾十萬個元素。 –

在Firefox中以編程方式更新CSS

回答

相關問題