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代码具有“重要”属性。我删除了“重要”但我仍然无法显示隐藏元素。）

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

在javascript中显示一个隐藏的元素是css

2 个答案: