Как управлять дочерним свойством css с помощью javascript?

Я знаком с тем, как установить атрибут идентификатора css с помощью js, например, в функции:

idOfMyCSSElement.setAttribute("style","color: #122362;");

Мне интересно, как я могу настроить таргетинг на вложенные элементы div или другие элементы с помощью js, у которых нет собственного идентификатора.

В css я могу настроить таргетинг на вложенный div, указав:

#idOfMyCSSElement div {border: thin solid red;}

Так что было бы здорово, если бы я мог настроить таргетинг на указанный div, выполнив что-то вроде этого в js:

idOfMyCSSElement.div.setAttribute("style","color: #122362;");

Но я понятия не имею, что я делаю в этот момент. Это всего лишь моя дикая догадка. Я считаю, что я должен использовать другой подход.

Я также хотел бы настроить таргетинг на что-то вроде свойства состояния наведения css:

#idOfMyCSSElement:hover {color: yellow;}

Есть ли способ нацелить это свойство желтого цвета с помощью JS и сделать его другим цветом при вызове функции js?


javascript jquery css hover setattribute
person Chain    schedule 14.11.2012    source источник
comment
возможный дубликат Можно ли изменить таблицу стилей CSS с помощью JavaScript? (НЕ стиль объекта, а сама таблица стилей)   -  person Quentin    schedule 15.11.2012

Ответы (2)


arrow_upward
3
arrow_downward

вы можете сделать это с помощью jquery следующим образом:

$("#idOfMyCSSElement div").css("color","#122362");

ИЗМЕНИТЬ:

вы можете имитировать псевдокласс hover следующим образом:

  $('.someclass').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });

EDIT 2: скажите, что ваши элементы, которые вы планировали изменить, имеют класс

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

$("#myButton").click(function(){
     $(".htmlElementsToChangeColor").css("color","your color code");
});
person Behnam Esmaili    schedule 14.11.2012
comment
Спасибо - это то, что чистый код jquery, так как я могу просто подсунуть его в обычную функцию js, и это произойдет. Я только начинаю работать с jquery и иногда немного не уверен, как он сочетается с обычным js. - person Chain; 15.11.2012
comment
С чистым JavaScript вы делаете: getElementsByTagName(div). Возвращает массив. - person Neps; 15.11.2012
comment
Отдельно, будет ли это работать и для таргетинга на состояние наведения css? - person Chain; 15.11.2012
comment
нет, я думаю, что он еще не поддерживает псевдокласс, такой как: hover, но вы можете обрабатывать событие hover с помощью jquery и применять определенный стиль к элементам. - person Behnam Esmaili; 15.11.2012
comment
JQuery — очень полезная библиотека с минимальной кривой обучения. Я обещаю, что вы можете изучить ее в кратчайшие сроки. - person Behnam Esmaili; 15.11.2012
comment
Спасибо, я отметил вас как ответ, так как вы были первыми, и я вижу, что это довольно просто. Я делаю средство выбора шаблонов, которое переключает цвета страницы одним нажатием кнопки... но я не знаю, как настроить таргетинг на состояния наведения, которые у меня есть в css. Я полагаю, вы говорите, что вместо этого лучше, чтобы js/jquery обрабатывал состояния наведения или наведения мыши. Теперь мне интересно, может ли класс переключения jquery ориентироваться на состояние наведения css или что-нибудь может, чтобы мне не нужно было менять свой css. - person Chain; 15.11.2012
comment
Обычно css выбирает последовательность html-элементов и применяет к ним определенное правило. В ok.jquery есть все эти селекторы + пара десятков других селекторов, которые вы можете использовать (см. api.jquery.com /category/selectors). После того, как вы выбрали свой элемент, вы можете делать с ним все, что хотите. Например, обрабатывать щелчок, наведение курсора,... события. А также добавлять класс удаления, применять стиль CSS и так далее. - person Behnam Esmaili; 15.11.2012

arrow_upward
1
arrow_downward

Самый простой способ — использовать jQuery.

Способ без jQuery — использовать .getElementByTagName.

person Matt Burland    schedule 14.11.2012
comment
Спасибо за ваш ответ тоже Мэтт - person Chain; 15.11.2012