Использовать имя класса для создания свойств стиля

Я работаю над маленьким столом, который имеет несколько разных прокладок, я должен поместить их в div, чтобы он работал.Использовать имя класса для создания свойств стиля

Но в настоящее время у меня много классов, содержащих только padding: Xpx;, где X соответствует имени класса padding-20. Я хочу иметь только один класс в моем CSS, который автоматически может назначить правильное количество дополнений его классом.

Возможно ли это с помощью CSS или есть JavaScript, необходимый для выполнения этой работы?

Спасибо!

источник

2015-07-24 Martin Beentjes

Вы можете сделать это с помощью сценария, анализируя имя класса, создавая правила и добавив его к одной из таблиц стилей документа. Что вы пробовали? – RobG

Без вашего html и css его невозможно даже начать. Я мог бы сказать вам несколько способов, которые могут сработать, но я не знаю, как выглядит ваш код/html. – ydobonebi

Пожалуйста, введите код, чтобы получить подробный ответ. Нет кода, нет ответа. –

Для этого необходимо JavaScript.

Разобрать документ, чтобы получить все узлы, и для каждого узла получить атрибут className для извлечения заданных значений отступов:

var all = document.getElementsByTagName("*"); 
 

 
for (var i = 0, max = all.length; i < max; i++) { 
 
    var className = all[i].className; 
 
    if (className !== '' && typeof className !== 'undefined') { 
 
    var paddingValues = className.split('-'); 
 
    switch (paddingValues[1]) { 
 
     case 'left': 
 
     all[i].style.paddingLeft = paddingValues[2] + "px"; 
 
     break; 
 
     case 'top': 
 
     all[i].style.paddingTop = paddingValues[2] + "px"; 
 
     break; 
 
     case 'right': 
 
     all[i].style.paddingRight = paddingValues[2] + "px"; 
 
     break; 
 
     case 'bottom': 
 
     all[i].style.paddingBottom = paddingValues[2] + "px"; 
 
     break; 
 
    } 
 
    } 
 

 
}

p, 
 
div, 
 
span { 
 
    background-color: yellow; 
 
}

<p>this a paragraph without any style</p> 
 
<div class="padding-left-20">Blabla blabla</div> 
 
<br> 
 
<span class="padding-left-10">some text....</span> 
 
<p class="padding-top-30">this a new paragraph</p>

Примечание:

Я полагаю, у вас будут все имена классов, относящиеся к этому формату:

обивка сторона значение

обивка-топ-30

обивка левая-10

источник

2015-07-24 07:25:51

Не совсем соглашение об именах, которое я использовал, я могу изменить это. Спасибо за помощь. Это именно то, что я искал. –

Отлично, рад, что это помогает, да, вы можете изменить его соответствующим образом. –

Использовать имя класса для создания свойств стиля

ответ

Смежные вопросы