Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2017, 16:33
Интересующийся
Отправить личное сообщение для ser1ko Посмотреть профиль Найти все сообщения от ser1ko
 
Регистрация: 05.06.2016
Сообщений: 22

Изменить стили элемента 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, 07.09.2017 в 16:40.
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2017, 16:40
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

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


JS:
document.querySelectorAll('.primer span')[1].style.color='red';
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2017, 16:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от ser1ko
как задать стили для <span>$OTHER1$</span>?
Как вариант...

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2017, 16:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

ser1ko,
а css никак?
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2017, 16:52
Интересующийся
Отправить личное сообщение для ser1ko Посмотреть профиль Найти все сообщения от ser1ko
 
Регистрация: 05.06.2016
Сообщений: 22

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

рони,не совсем понял, каким образом?
Ответить с цитированием
  #6 (permalink)  
Старый 07.09.2017, 16:53
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

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;
};
};
Ответить с цитированием
  #7 (permalink)  
Старый 07.09.2017, 16:59
Интересующийся
Отправить личное сообщение для ser1ko Посмотреть профиль Найти все сообщения от ser1ko
 
Регистрация: 05.06.2016
Сообщений: 22

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;
};
};
Ответить с цитированием
  #8 (permalink)  
Старый 07.09.2017, 17:02
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

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

Последний раз редактировалось Nexus, 07.09.2017 в 17:07.
Ответить с цитированием
  #9 (permalink)  
Старый 07.09.2017, 17:09
Интересующийся
Отправить личное сообщение для ser1ko Посмотреть профиль Найти все сообщения от ser1ko
 
Регистрация: 05.06.2016
Сообщений: 22

Nexus,
через cssText сделал. Все работает, переделал под себя.
Большое спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 07.09.2017, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от ser1ko
рони,не совсем понял, каким образом?
смотри css, пример Nexus, пост№2
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Диалог между HTML и внешним JS в контексте расширения GoogleChrome ev1lart Events/DOM/Window 0 26.04.2017 19:25
Изменение масштаба в браузере с помощью js Bond Общие вопросы Javascript 3 09.04.2014 18:25
Вывод текста из JS файла в атрибут div на html страничке. help Kreol Общие вопросы Javascript 11 15.12.2012 13:08
ajax и загрузка html сраницы с js в <div> eidicon jQuery 2 09.05.2012 16:26
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43