使在javascript中可見的隱藏元素是CSS

Question

我的網站通過iframe顯示了一個頁面（來自遠程服務器）。 我沒有html控件到此頁面，但可以在同一遠程服務器上的JS文件中添加javascript代碼（無jquery）。

的HTML

    <li id='row_force_language'><label for='row_force_language'>Language</label><select id='force_language' name='force_language' >
    <option  value="CA" >CA</option>
    <option  value="CS" >CS</option>
    <option  value="DA" >DA</option>
    </select>

此html用此CSS隱藏（位於遠程服務器上的樣式表中）：

    #row_force_language {display: none;}

現在，如果我將此代碼添加到JS文件中，則html將不可見：

    document.getElementById('row_force_language').style.display='inline-block';

我的JS代碼錯了嗎？ 還是只是不可能？

（先前的CSS代碼具有“ important”屬性。我刪除了“ important”，但仍然無法顯示隱藏的元素。）

Answer 1

確實， !important是阻止應用此內聯樣式。 擺脫CSS中的!important或在JS中添加一個：

document.getElementById('row_force_language').style.display='inline-block !important';

但是，請注意，您已經開始陷入特異性戰爭。 我不能推薦您盡可能避免使用!important聲明。

Answer 2

內聯樣式通常比ID選擇器具有更高的特異性，除非選擇器具有！important關鍵字。

具有！important關鍵字的內聯樣式將比具有！important關鍵字的#id選擇器優先。

話雖如此，這將工作：

document.getElementById('test').setAttribute('style','display:inline-block !important');

在此處查看示例： http ： //codepen.io/anon/pen/tuKEm