Как я могу использовать переменные CSS в? - PullRequest
Новая
       39

Как я могу использовать переменные CSS в?

0 голосов
/ 08 июля 2019

Я хочу использовать мои точки останова Bootstrap в моем HTML.Я определил их в: root.

:root {
    --mq-xs: some value;
    --mq-sm: some value;
    --mq-md: some value;
    --mq-lg: some value;
}

Мне нужно использовать элемент с несколькими дочерними элементами.Я знаю, что вы можете использовать переменные CSS в атрибуте style="".Я хочу добавить атрибут media="" к этому элементу <source> и надеялся, что смогу сделать следующее: 

    <picture>
        <source srcset="..." media="(min-width: var(--mq-lg))" />
        <source srcset="..." media="(min-width: var(--mq-md))" />
        <source srcset="..." media="(min-width: var(--mq-sm))" />
        <img class="img-responsive" alt="" src="..." />
    </picture>

Ничего не происходит.

Есть ли альтернативный способ сделать такую ​​вещь?Я знаю, что вы можете передавать пользовательские свойства CSS через JavaScript, но это кажется слишком много.

1 Ответ

0 голосов
/ 08 июля 2019

вы не можете вызывать переменную css в dom, просто в атрибуте style переменные css просто упрощают запись ваших css файлов

для вашей проблемы вы можете использовать javascript, потому что мы работаем здесь только с примером строки

Я предлагаю вам на время забыть переменную css, потому что старый браузер не может их понять, для этого лучше использовать sass или меньшую предварительную обработку.

, поэтому, если вам нужно управлять вашим var динамически, вы не можете использовать cssФайл, который вы должны использовать JavaScript здесь небольшой пример. 

<picture>
        <source class="sources" srcset="..." media="(min-width: var(--mq-lg))" />
        <source class="sources" srcset="..." media="(min-width: var(--mq-md))" />
        <source class="sources" srcset="..." media="(min-width: var(--mq-sm))" />
        <img class="img-responsive" alt="" src="..." />
 </picture>
<script>

var cssVar = {
  xs : 'same value to css var',
  sm : 'same value to css var',
  md : 'same value to css var',
  lg : 'same value to css var'
}

var sources = document.getElementsByClassName('sources')

sources[0].setAttribute('media', cssVar.lg);
sources[1].setAttribute('media', cssVar.md);
sources[2].setAttribute('media', cssVar.sm);

<script/>
...