Question

我试图检查我的代码内部是否将a应用于其css样式，将属性溢出-y：自动。例如，如果my有一个类“ abcd”，而“ abcd”有其css溢出-y：自动，则传递。虽然我已经找到了我没有使用过的jquery方法，但是我想找到一种用于纯JavaScript（或Angular JS）的方法，以查找元素是否具有给定的CSS属性。没有jquery怎么办？

Answer 1

您可以使用以下代码使用纯JavaScript进行检查：document.getElementById('myElement').style['overflow-y']。

问题在于该代码仅适用于内联CSS样式，如<div style="overflow-y: visible">...</div>中所示。如果css样式来自某个类，则找不到这样的样式。

jQuery css方法将找到计算出的样式（因此即使它来自类，它也可以检测overflow-y的实际值）。但是css代码非常庞大。您可以在这里找到它：https://github.com/jquery/jquery/blob/master/src/css.js

我想补充一下，检查元素是否具有特定的CSS样式是一种非常难闻的气味。

相反，您应该真正考虑检查元素是否具有特定的类。或者，如果您使用的是angularjs，则在模型中使用简单的布尔值即可解决问题。

如果您真的想检查某个元素是否应用了overflow-y: auto;样式，则根据jQuery代码，它们将使用window.getComputedStyle(element)。他们也有很多代码，它们的临时div位置很奇怪（position:absolute;left:-11111px;width:60px;），但主要是为了支持IE8和IE9等旧版浏览器。

对于您来说，这样的方法可能有效：window.getComputedStyle(document.getElementById('myElement'))['overflow-y'] === 'auto'。

Answer 2

您可以使用getComputedStyle对象上可用的window方法。

var myElement = document.getElementById('myElement');
var overflowValue = getComputedStyle(MyElement).overflowY;
if (overflowValue == 'auto') {
  // your code here
}

此方法将获取当前应用的css属性的值。

有关更多信息，请参阅here。

希望有帮助。

Javascript / AngularJS：检查元素是否具有应用样式y的样式

2 个答案: