Изменить стили элемента HTML с помощью JS
 

На сайте есть переменная $OTHER1$, числовое значение, которое я задаю вручную. Допустим, это значение = '3'

html код выглядит след. образом:

<div class="primer">
<span>1</span>, <span>2</span>, <span>3</span>, <span>4</span>, <span>5</span>.
</div>

Пользователь видит:

1, 2, 3, 4, 5.

Вопрос: как задать стили для <span>3</span>?
т.е. конкретно для <span>, внутри которого цифра = $OTHER1$. другие стили <span> задавать не нужно.

ser1ko, CSS:

.primer span:nth-child(2){
color:red;
}

JS:

document.querySelectorAll('.primer span')[1].style.color='red';

Как вариант...

<div class="primer">
	<span>1</span>, <span>$OTHER1$</span>, <span>3</span>.
</div>
<script type='text/javascript'>
var o=document.querySelector('.primer > span:nth-child(2)');
o.style.color='red';
</script>

ser1ko,
а css никак?

Nexus,ksa, прошу прощения, немного перефразировал вопрос. варианты, что вы предложили, кажется, не совсем подходят

рони,не совсем понял, каким образом?

ser1ko,

var found=3,
elems=document.querySelectorAll('.primer > span');
for(var i=0;i<elems.length;i++){
if(parseInt(elems[i].innerHTML)==found){
elems[i].style.color='red';
break;
};
};

Nexus,
да, кажется то, что нужно. а если мне нужно задать эти стили??

color: #fff;
border-color: #337ab7;
background: #337ab7;

этот вариант не работает

var found=3,
elems=document.querySelectorAll('.primer > span');
for(var i=0;i<elems.length;i++){
if(parseInt(elems[i].innerHTML)==found){
elems[i].style.color='#fff';
elems[i].style.border-color='#337ab7';
elems[i].style.background='#337ab7';
break;
};
};

ser1ko, если наименование свойства состоит из нескольких слов, то оно записывается в camelCase стиле.
https://learn.javascript.ru/styles-a...ство-style
Upd. Можно еще использовать свойство «cssText».

Nexus,
через cssText сделал. Все работает, переделал под себя.
Большое спасибо!

смотри css, пример Nexus, пост№2