Question

当我使用jQuery通过以下方式获取css属性时：

$(selector).css("min-height");

返回的值始终是像素值，即使我使用＆＃34; vw＆＃34; CSS中的单位，例如：

https://jsfiddle.net/darrengates/3yqt3nrj/

如何在样式表中输入ACTUAL CSS值（以vw为单位）？

Answer 1

你可以采取两种方式。

1st（纯CSS）给你的CSS规则命名如下，所以当你得到这个类时，你知道应用了什么类型的CSS：

root

如果你想要，你可以随时计算得到vh vw或％：

.width_25vw {
  width: 25vw;
}

.min-height_25vh {
  min-height: 25vh;
}

.bg-red {
  background: red;
}

注意var mh = Math.ceil(parseFloat($('.min-height_25vh').css("min-height"))); var wh = $(window).height(); console.log(mh + 'px'); console.log(wh + 'px'); console.log(mh/wh*100 + 'vh');这里因为StackOverflow没有返回正确的px值。（您也可以在此处查看示例：https://jsfiddle.net/dalinhuang/07s1t5qw/）

此外，您可以通过样式表获取原始CSS循环，但这是非常广泛的。（参考：How to get a style attribute from a CSS class by javascript/jQuery?）

＆＃13;

Math.ceil

＆＃13;

var mh = Math.ceil(parseFloat($('.min-height_25vh').css("min-height")));
var wh = $(window).height();
console.log(mh + 'px');
console.log(wh + 'px');
console.log(mh/wh*100 + 'vh');

＆＃13;

.width_25vw {
  width: 25vw;
}

.min-height_25vh {
  min-height: 25vh;
}

.bg_red {
  background: red;
}

＆＃13;

如何通过jQuery获取输入样式表的ACTUAL CSS？

1 个答案: