Как получить АКТУАЛЬНЫЙ CSS, который был введен в таблицу стилей через jQuery?

Когда я использую jQuery для получения свойства css через:

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

Возвращаемое значение всегда является значением в пикселях, хотя я использую единицы измерения "vw" в CSS, например:

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

Как я могу получить АКТУАЛЬНОЕ значение CSS (в vw), которое было введено в таблицу стилей?


jquery css viewport-units
person Darren Gates    schedule 05.06.2017    source источник
comment
Можно разобрать саму таблицу стилей CSS. Вопрос в том, уверены ли вы, что вам нужно к? Вы всегда можете преобразовать пиксели обратно в единицы измерения vw, взяв $(window).width() и проделав небольшую математику.   -  person Blazemonger    schedule 05.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Два способа вы можете сделать это.

1-й (чистый CSS) дайте имя вашему правилу CSS следующим образом, поэтому, когда вы получаете класс, вы знаете, какой тип CSS применяется:

.width_25vw {
  width: 25vw;
}

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

.bg-red {
  background: red;
}

2-й Вы всегда можете рассчитать, чтобы получить vh vw или%, если хотите:

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

Обратите внимание на Math.ceil здесь, потому что StackOverflow не возвращает правильное значение пикселей. (Вы также можете проверить пример здесь: https://jsfiddle.net/dalinhuang/07s1t5qw/ )

Кроме того, вы можете получить необработанный цикл CSS через таблицу стилей, но это дорого. (ССЫЛКА: Как получить атрибут стиля из класса CSS с помощью javascript/jQuery?)

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');
.width_25vw {
  width: 25vw;
}

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

.bg_red {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="width_25vw min-height_25vh bg_red">
</div>

person Dalin Huang    schedule 05.06.2017