JS 添加内联 css 到 html

Question

我在这里遇到了问题：

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

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

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

问题出在这里：

当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。

Answer 1

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

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

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

Answer 2

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

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

这个 'pseudo' js 代码应该作为事件监听器工作。虽然还没有测试，但我认为没问题。

Answer 3

与其将内联 CSS 直接添加到元素，为什么不将 CSS 属性抽象为广义类，然后只 add/remove 那些类 ?!

// 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');
});

JS 添加内联 css 到 html

JS add in-line css to html

javascript

html

css

angularjs

selectize.js