Можно ли получить регулярное выражение от attr () в CSS? - PullRequest
Новая
       13

Можно ли получить регулярное выражение от attr () в CSS?

0 голосов
/ 03 февраля 2019

Я пытаюсь создать свой собственный CSS-фреймворк, чтобы лучше его понять.Что-то, что я хочу сделать, это указать, сколько строк-столбцов охватывает что-то.Для этого я хотел бы использовать некоторые регулярные выражения.

В настоящее время у меня есть следующий HTML-код: 

<div class="wrapper">
  <div class="item-1 span1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
  <div class="item-7">Item 7</div>
  <div class="item-8">Item 8</div>
  <div class="item-9">Item 9</div>
  <div class="item-10">Item 10</div>
  <div class="item-11">Item 11</div>
  <div class="item-12">Item 12</div>
  <div class="item-13">Item 13</div>
  <div class="item-14">Item 14</div>
  <div class="item-15">Item 15</div>
  <div class="item-16">Item 16</div>
</div>

С этим CSS-кодом: 

@import "reset.css";
:root{
  width: 100vw;
  height: 100vh;
  --box-color: #eee;}
body{
  min-width: 100%;
  min-height: 100%;}

.wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
}

* [class*=span]{
  background: var(--box-color);
}

* [class*=span]::before{
  content: attr(class);
}

В настоящее время CSS устанавливает серый фон только в том случае, если он имеет класс span.Затем я хотел бы grid-row: <span-(number)>.

Возможно ли это сделать с помощью чистого CSS или мне также придется использовать JavaScript?
Если я могу использовать только CSS, как я смогусделать это?

Ответы [ 3 ]

0 голосов
/ 03 февраля 2019

Я не думаю, что возможно получить класс элемента HTML с чистым CSS.Чтобы сделать это с помощью JavaScript, просто выполните: 

console.log(document.getElementById("element").getAttribute("class"));
<p class="test" id="element">value</p>

Или, на мой взгляд, вы можете использовать более простой метод с использованием jQuery: 

console.log($("#element").attr("class"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="test" id="element">value</p>
0 голосов
/ 07 февраля 2019

Это невозможно с CSS;как говорит LGSon, attr() выдаст вам все значение атрибута в виде одной строки, и вы не сможете выполнять какие-либо манипуляции со строками.

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

0 голосов
/ 03 февраля 2019

CSS сделан для стилизации HTML-тегов.Невозможно выполнить какую-либо математическую задачу в CSS.Для любого приращения или уменьшения или любого вычисления вам нужно использовать JavaScript.

...