JS 将内联 css 添加到 html答案

【问题标题】：JS add in-line css to htmlJS 将内联 css 添加到 html
【发布时间】：2015-10-10 04:42:49
【问题描述】：

我在这里遇到了一些问题：

我在结果页面中有一个带有一些可选过滤器的隐藏 div。

<div id='b-filters' class='row'>...</div>

最初它是用display: none; 隐藏的，当单击一个链接时，它会显示一些按钮并选择组合。

问题出在这里：

当div出现时，一些JS，我不知道怎么找出来；添加一些内联css：

<div id='b-filters' class='row' style='overflow: hidden; display: block;'>...</div>

所以看不到组合选项。使用 Chrome 调试器，我将 overflow: hidden 更改为 overflow: visible，它可以按我的意愿工作。

我试过了：

在我的外部 css 文件 (app.css) 中

#b-filters{
  ...
  overflow: visible;
  ...
}

但是不行，而且在同一个html文件中：

<head>
...
  <style>
    div#b-filters{
      overflow: visible;
    }
  </style>
</head>
...

但 Chrome 检查器总是显示 overflow: visible; 被划掉。

有什么想法吗？谢谢。

编辑

我接受了@Stephen Thomas 的回答，但我希望有人帮助我找出哪个 JS 正在添加该内联 css。

【问题讨论】：

能否将您的 JavaScript 添加到您的帖子中？
你如何“取消隐藏”<div>？
内联 CSS 优先于所有其他 CSS 除了标记为 !important 的规则。如果你使用 jQuery，你可以用他们的 .css() 方法覆盖它。
@Waflix 显示 div 所涉及的 js 是 Foundation js

标签： javascript html css angularjs selectize.js

【解决方案1】：

没有看到实际的 JavaScript，我能提供的唯一建议是

div#b-filters{
  overflow: visible !important;
}

但是，如果您向我们展示您的代码，可能会有更优雅的方式。

【讨论】：

天哪，这就像魔术！它有效，但为什么这不优雅？
这对你来说可能刚刚好。 OTOH，有些人可能更喜欢首先消除 overflow: hidden 而不是覆盖它
有些人还认为使用 !important 是不好的做法，无论在什么情况下。
@HaukurHaf 这是一个很大的讨论话题，如果使用某些东西没有好处，它为什么存在？
澄清一下，我不是那些人中的一员 :-) 我在适当的时候使用 !important。这是 !important 有用的一个用例，但也许最好首先找到并删除/禁用添加此溢出样式的代码:-)

【解决方案2】：

与其直接将内联 CSS 添加到元素，为什么不将 CSS 属性抽象为通用类，然后添加/删除这些类？！

// style.css
.hide {
   display: none;
}

// view.html
<div id="b-filters" class="row hide">...</div>

// app.js
btn.addEventListener('click', function(event){
   var el = document.querySelector('#b-filters');
   el.classList.remove('hide');
});

【讨论】：

谢谢，这是一个非常好的解决方案，但在我的例子中，涉及到很多 AngularJS（控制器和指令）。
确切的动作（隐藏和显示）是使用 Foundation 内置 js 进行的

【解决方案3】：

var problematicDiv = document.getElementById('b-filters');

if(problematicDiv.hasAttribute('style'))
{
    problematicDiv.removeAttribute('style');
    problematicDiv.style.display = 'block';
    problematicDiv.style.overflow = 'visible';
}

这个“伪”js 代码应该作为事件监听器工作。虽然还没有测试，但我认为没关系。

【讨论】：