Есть ли в html аналог switch или if, позволяющий изменять выводимые данные в зависимости от полученных?
У меня возник такой вопрос, нужно сделать так, чтобы в зависимости от полученных внешних данных изменялась выводимая картинка. Грубо говоря, если мне пришло 1-5, то выводиться грустный смайлик, а если 6-10 то веселый. Есть ли возможность организовать это непосредственно в html или лучше это как-то сделать через css файл?
Ответы (1 шт):
если прям сильно хочется, с CSS не очень изящно, но можно сделать нечто подобное.
@counter-style abc{
system: cyclic;
symbols: ':(' ':(' ':(' ':(' ':(' ':)' ':)' ':)' ':)' ':)';
}
#x{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 1em;
}
#x >*{
list-style: decimal inside;
border: 1px solid black;
}
#x >*:before{
content: counter(list-item, abc);
}<ol id='x'>
<li><li><li><li><li><li>
<li><li><li><li><li><li>
<li value='5'><li value='9'><li value='3'>
<li value='7'><li value='1'><li value='10'>
<li value='5'><li value='9'><li value='3'>
<li value='7'><li value='1'><li value='10'>
<li value='5'><li value='9'><li value='3'>
<li value='7'><li value='1'><li value='10'>
</ol>https://developer.mozilla.org/ru/docs/Web/CSS/@counter-style
p.s. теоретически можно и графику в качестве символов подставлять с помощью url(), но у меня(под далеко не самым древним FF 91) оно не хочет работать должным образом.
формально в @counter-style есть и свойство range и прочие интересности типа system: A extends B, но реализация посредственная, потому лучше будет отказаться хотя бы в пользу JS, как уже посоветовали ранее.