javascript - 切换样式 :display only works when style is in HTML not in CSS

Question

将 CSS 样式适本地移动到 CSS 页面时遇到问题。我的原始页面运行良好:

<span class="faq-answer" data-category="<%=category %>" data-index="<%= i %>" style="display:none;"><%= a %></span>

function toggleVisible(category, index) {
  var select_answer = '.faq-answer[data-category="' + category + '"][data-index="' + index + '"]';
  var current_display = $(select_answer)[0].style.display;
  if (current_display === "none") {
    $(select_answer)[0].style.display = "block"
    $('.faq-question[data-category="' + category + '"][data-index="' + index + '"]')[0].style.paddingBottom="10px"
  } else if (current_display === "block") {
    $(select_answer)[0].style.display = "none"
    $('.faq-question[data-category="' + category + '"][data-index="' + index + '"]')[0].style.paddingBottom="0px"
  };
}

但是，一旦我将 style="display:none" 放入 CSS 文件中，如下所示:

.faq-answer {
  display:none;
}

然后 JS 停止工作以打开和关闭显示。这是怎么了

Answer 1

element.style 包含内联样式的样式，而不是来自 CSS 样式表的样式。您将需要使用 jQuery("element").css或 getComputedStyle获取值(value)

JQuery CSS 方法

var dispVal = jQuery(".faq-answer").css("display");
console.log(dispVal);

.faq-answer {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-answer"><div>

getComputedStyle

var ele = document.querySelector(".faq-answer");
var style = window.getComputedStyle(ele);
console.log(style.display);

.faq-answer {
  display:none;
}

<div class="faq-answer"></div>

您还可以更简单地使用 .is(":visible")这将返回一个 bool 值，如果可见则返回 true，否则返回 false。

var isVisible = $(".faq-answer").is(":visible"); ;
console.log(isVisible);

.faq-answer {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-answer"><div>