在javascript中使隐藏的元素可见是css

Make visible in javascript an element which is hidden is css

本文关键字：css 元素 javascript 隐藏      更新时间：2023-09-26

我的站点通过 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阻止了这种内联样式的应用。要么去掉CSS中的!important，要么在JS中添加一个：

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

但是，请注意，您已经开始陷入一场特殊性战争。我怎么推荐都不为过，让你尽可能避免使用!important声明。

内联样式通常比 ID 选择器具有更高的特异性，除非选择器具有 ！important 关键字。

带有 ！important 关键字的内联样式将优先于带有 ！important 关键字的 #id 选择器。

话虽如此，这将起作用：

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

请参阅此处的示例：http://codepen.io/anon/pen/tuKEm

相关文章：