用jquery检查css的属性值

时间:2014-01-14 19:15:12

标签: javascript jquery css dom if-statement

我无法弄清楚我在这里做错了什么。

所以我想使用jquery来检查css类的属性值是否等于某个东西。如果是,则执行一些代码,如果不执行其他代码。

问题在于其中一些会起作用而另一些则不起作用。例如,这是我的jquery:

if (jQuery( ".mobile_swap" ).css('height') == '100%' ){
        console.log("worked");
    } else {
        console.log("nope");
    }

现在它不起作用,但如果我将其更改为:

if (jQuery( ".mobile_swap" ).css('height') == '100px' ){
        console.log("worked");
    } else {
        console.log("nope");
    }

它会起作用。所以我的问题是为什么它会识别px而不是百分比?它也不适用于汽车。显然,当我测试这个时,我确保css部分是正确的,所以这是真的。

提前致谢!

2 个答案:

答案 0 :(得分:5)

jQuery计算所选DOM元素的当前内部高度(以像素为单位)(在您的情况下为".mobile_swap")。这绝不是一个百分比。

百分比只能在定义CSS样式时使用,之后浏览器会评估百分比并在页面加载时将元素设置为该高度(以px为单位)。

如果您绝对需要根据百分比对其进行评估,则需要检索父元素的高度(或宽度),并根据子元素的高度(或宽度)执行一些基本计算。

答案 1 :(得分:1)

如果只有一个具有此特定类的元素,请使用:

jQuery( ".mobile_swap" ).height() === jQuery( ".mobile_swap" ).parent().height()

否则,您将不得不使用每个循环遍历所有元素并将自己的高度与父高度进行比较。 100%表示父母身高。