Есть ли способ, которым я могу редактировать переменную CSS через заголовок класса CSS? - PullRequest
Новая
       6

Есть ли способ, которым я могу редактировать переменную CSS через заголовок класса CSS?

0 голосов
/ 28 августа 2018

Итак, у меня есть кто-то, кто хочет использовать специальный заголовок класса, чтобы иметь возможность изменить заполнение div. Я быстро создал класс с именем .columnpadding, чтобы они могли это сделать. Позже меня попросили сделать еще несколько уроков, чтобы они могли менять отступы на нескольких страницах. Вместо того, чтобы дублировать класс css снова и снова и менять отступы для каждого, есть способ, которым я мог бы изменить переменную через заголовок класса.

Например.

Если заголовок класса .columnpadding-100 Есть ли способ получить класс с отступом 100px?

Мой сайт работает на Php и Less. Дайте мне знать, если кодирование будет слишком сложным. Я надеюсь, что это не что-то слишком сумасшедшее! Спасибо!

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Итак, давайте предположим, что у нас есть следующая базовая структура: 

div {
  border: 1px solid black;
  height: 10px;
  width: 10px;
}
<div class="columnpadding-50"></div>
<div class="columnpadding-30"></div>
<div class="dontchangeme"></div>
<div class="columnpadding-10"></div>

Используя только Vanilla JS, мы легко можем достичь желаемого результата: 

var divs = document.querySelectorAll("div[class^='columnpadding-']");

for (let i = 0; i < divs.length; i++){
  let psize = divs[i].getAttribute('class');
  psize = psize.substring(psize.indexOf('-') +1, psize.length);
  divs[i].style.padding = psize + 'px';
}
div {
  border: 1px solid black;
  height: 10px;
  width: 10px;
}
<div class="columnpadding-50"></div>
<div class="columnpadding-30"></div>
<div class="dontchangeme"></div>
<div class="columnpadding-10"></div>
  • Где мы сначала выбираем все классы связи div со значением columnpadding- в NodeList
  • Затем мы извлекаем строку каждого атрибута класса и substring ее из -, чтобы получить размер
  • И последнее, но не менее важное: мы применяем style.padding к выбранным элементам в NodeList

И вуаля , дает ожидаемый результат!

0 голосов
/ 28 августа 2018

Использовать JQuery

CSS - не требуется, но здесь для примера 

div {
    display: inline-block;
}

HTML 

<div class="columnpadding-100">This has 100 padding
</div>
<div class="columnpadding-50">This had 50 padding
</div>

JavaScript / JQuery 

$(document).ready(function(){ // wait until the page is completely loaded
    $("[class^='columnpadding-']").each(function(){ // get every element that has a class starting with "columnpadding-"
        let classNamesString = $(this).attr('class'); // get the string of class nameS from this element
        let classNames = classNamesString.split(" "); // create an array of class names
        $.each(classNames, function(index, className){ // loop through the class names looking for the one we want
            if (className.startsWith("columnpadding-")) { // hey, this is the one we want
                let amount = className.substring(14); // get the amount after the hyphen
                $("." + className).css("padding", amount + "px"); // set the css for the padding on the element
            }
        });
    });
});
...