Почему интегрированный css не срабатывает?

Question

[historydev]

Доброй ночи. Скажите пожалуйста, почему у меня вставляется строка вместо рассчитанного значения?

let c1 = `calc(100%/var(--count) * ${v1})`

				document.querySelector(`.value[data-id='1']`).style.width = c1

Result:



Thanks.

Comments

[Ivan Bogachev]

Вроде бы все работает так, как и должно работать. А что вы ожидаете там получить?

[historydev]

Ivan Bogachev, я до этого использовал аналогичную систему только из блоков, но это жертва скоростью..

Я брал блок А - давал ему ширину calc(100%/15) и потом добавлял множеное кол-во блока А в блок Б, работало как часы.

Здесь аналогия по сути, но результат совершенно не тот, мне нужно чтобы ширина равнялась 100/15 * кол-во,по идее, я так думаю, должно работать так допустим 100/15 = 3.33 - 3.33 * допустим на 10, окрулгим 30% в итоге должно быть, от 100%, но оно так не работает..

[historydev]

Ivan Bogachev, извините за поздний ответ, пыхтел тут сидел :)

Answer 1

[Алексей Ярков]

Потому что надо так: https://jsfiddle.net/yarkov_aleksei/vzLdtf16/

const v1 = 100;
const count = getComputedStyle(document.documentElement).getPropertyValue('--count');
const width = `calc(100% / ${count} * ${v1})`;

document.querySelector('div').style.width = width;

<div>TEST</div>

:root {
  --count: 50;
}

div {
  border: 1px solid red;
}

Суть в том, что var(--count) не выполнится в этом контексте и надо получить значение CSS переменной через

getComputedStyle(document.documentElement).getPropertyValue('--count')

.

Comments

[historydev]

Спасибо большое! Я такой овощ, я так затупил, у меня блок ведь 40%, а я делил 100%, просто пипец, все колоночки ровненько кроме главных, там я попытался внедрить туже систему, блок 40%/75 * v1_g, но тут погрешность сильная, откидывает намного вперёд полоску, вот тут можете посмотреть. Далее, Далее, Завершить и будут результаты

P.S: Я не понимаю почему погрешность появляется..

[historydev]

[historydev]

Мне нужно выходит каждую 5-ку в числе добавлять 100/15, а вот формулу какую, хмм