Как через JS добавить стили для SPAN?

Question

[Сергей Горячев]

Привет, тут конкретно нужна помощь, реализация в голову не приходит.

Фидл: jsfiddle.net/webirus/yfjqp49q

<span class="span20">Размер шрифта 20 пикселей</span><br>
<span class="span26">Размер шрифта 26 пикселей</span><br>
<span class="span40">Размер шрифта 40 пикселей</span><br>
<span class="span14">Размер шрифта 14 пикселей</span>

.span14 {font-size: 14px;}
.span20 {font-size: 20px;}
.span21 {font-size: 21px;}
.span22 {font-size: 22px;}
.span23 {font-size: 23px;}
.span24 {font-size: 24px;}
.span25 {font-size: 25px;}
.span26 {font-size: 26px;}
.span40 {font-size: 40px;}

Сейчас у меня реализовано так, но там очень много разных размеров, больше, чем 2, которые указал.
Можно ли через JS или лучше jQuery сделать небольшой скрипт, который смотрел бы на цифру в названии класса span-size-20 и автоматом прописывал бы это же значение 20px в css, можно даже в inline.

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

Имена классов не критичны, можно добавить общий класс, все эти стили лежат в отдельном от страницы div'e.

Спаны идут один за одним и содержат разный текст screen.webirus.ru/2015-10-06_224457.png
И правится всё это дело через html. Не хочется прописывать все возможные размеры шрифтов от 10пикселей до 50пикселей, создавая классы. И в этом блоке с акциями шрифты разные чуть ли не на каждой строчке.

Answer 1

[Sergiu Mitu]

$('span').each(function(){
	var font_size = $(this).attr('class');
	font_size = font_size.replace(/\D/g, '') + 'px';
	$(this).css('font-size', font_size);
})

Comments

[Дмитрий]

А зачем объявлять глобальную переменную?)

[Sergiu Mitu]

Мой прошлый ответ был неработоспособный, исправил.

[Sergej]

Дмитрий: Что бы потом можно было изменить.

[Сергей Горячев]

Сергей: Вот более наглядно, что есть и что хотелось бы я описал уже - jsfiddle.net/webirus/yfjqp49q
Пока подружить с вашим скриптом не получилось ни первый код, ни тот что, есть сейчас.

[Sergiu Mitu]

Sergey Goryachev: https://jsfiddle.net/yfjqp49q/1/ все же работает

[Сергей Горячев]

Сергей: screen.webirus.ru/2015-10-06_232821.png

[Сергей Горячев]

Сергей: даже не знаю, что ответить, у меня не получается)

[Sergiu Mitu]

заменить str на font_size

[Sergiu Mitu]

Sergey Goryachev: prntscr.com/8oieur

[Сергей Горячев]

Сергей: Спасибо!!!

Answer 2

[Виталий Инчин ☢]

Если задать span'ам общий класс, то можно еще проще:

<span class="sps span-size-20">20</span>
<span class="sps span-size-55">55</span>

$(".sps").css("font-size", function(){ 

   var fontSize = this.className
        .split("span-size-")[1].split(" ")[0];

   return fontSize + "px";

});

jsfiddle.net/5Lwbbpw6/1

Ну а самый правильный подход такой:

<span data-size="20">Строка</span>
<span data-size="50">И я строка</span>

$("span[data-size]").css("font-size", function(){ 
   return this.dataset.size + "px";
});

Answer 3

[Пащук Илья]

$('.span').attr("style","font-size: 20px;) или просто подключением и отключением класca .addClass .removeClass

Comments

[Сергей Горячев]

Мне кажется вы не совсем уловили суть вопроса, тут эти спаны идут подряд, их может быть 4-10 штук в одном блоке, и каждый с разным шрифтом. screen.webirus.ru/2015-10-06_224457.png

[Пащук Илья]

$('#firs родительский блок').each(function (){
проверка на наличие класса
if ($('#firs span').hasClass('span-size-20')){
$(this).addClass('active');
}
});

.active{font-size: 20px;} //