Как изменить атрибут STYLE элемента с известным идентификатором, используя JQuery - PullRequest
30 голосов
/ 22 сентября 2009

У меня есть 3 кнопки-ссылки, запускающие некоторый код JavaScript, с указанием, что при нажатии определенной кнопки выбранная кнопка получила атрибут стиля, установленный на

"btn brown selected"

, в то время как для других кнопок этот атрибут установлен на

"Btn Brown"

Одновременно может быть выбрана только одна кнопка, каждая из кнопок получила свой уникальный идентификатор, мой вопрос в том, как использовать jquery access для определенной кнопки, чтобы изменить ее стиль. Что мне нужно, это только как получить доступ по одной кнопке идентификатора и изменить его атрибут стиля, чтобы получить немедленное обновление на экране

спасибо заранее MTH

Ответы [ 3 ]

50 голосов
/ 22 сентября 2009

Используйте функцию CSS из jQuery, чтобы установить стили для ваших элементов:

$('#buttonId').css({ "background-color": 'brown'});
39 голосов
/ 22 сентября 2009

Не уверен, что полностью понимаю вопрос, но:

$(":button.brown").click(function() {
  $(":button.brown.selected").removeClass("selected");
  $(this).addClass("selected");
});

похоже на то, что вы хотите.

Я бы определенно рекомендовал использовать классы вместо прямой настройки CSS, что проблематично по нескольким причинам (например, удаление стилей нетривиально, удаление классов легко), но если вы хотите пойти по этому пути:

$("...").css("background", "brown");

Но когда вы хотите отменить это изменение, на что вы его установите?

1 голос
/ 24 декабря 2012
$("span").mouseover(function () {
$(this).css({"background-color":"green","font-size":"20px","color":"red"});
});

<div>
Sachin Tendulkar has been the most complete batsman of his time, the most prolific     runmaker of all time, and arguably the biggest cricket icon the game has ever known. His batting is based on the purest principles: perfect balance, economy of movement, precision in stroke-making.
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...