Удалить стили JavaScript, позволяя CSS взять контроль

Question

Удалить стили JavaScript, позволяя CSS взять контроль

0

Преамбула: возможный дубликат моего вопроса можно найти здесь, хотя для меня этот вопрос не получил достаточного ответа. Дается обход, но окончательный ответ на вопрос о том, возможно ли это, не предоставляется.

Вопрос: на моем веб-сайте, когда пользователь нажимает кнопку (или область экрана), я хочу, чтобы эта область "вспыхивала" пару раз, прежде чем вернуться в исходное состояние. (Я думаю, что это дает пользователю уверенное ощущение того, что что-то активировано, так как в некоторых случаях у них может быть небольшая задержка до того, как будет дана обратная связь.)

Во всяком случае, мне удалось получить эту работу, используя немного JavaScript и jQuery, и вы можете увидеть результаты здесь >>.

Как вы можете заметить, проблема в том, что после выполнения мигания элемент не возвращается в исходное состояние. Скорее, он сохраняет свое последнее состояние "flash" и переопределяет базовый стиль CSS, который изначально стилирует объект при загрузке страницы.

Я стилю элемент со следующим jQuery:

$jq_obj.css('background-color',flash_fg_color_).css('color',flash_bg_color_);

И я пытаюсь "не стирать" его:

$jq_obj.removeAttr('background-color').removeAttr('color');

Я также пробовал :;

$jq_obj.css('background-color','').css('color','');

Несмотря на документацию, говорящую, что это должно удалить стиль, это не так.

Есть ли решение, или мне нужно вернуться к решению для работы, упомянутому в моей преамбуле? Самое приятное в опции JavaScript заключается в том, что он становится намного более универсальным, если вы хотите немного поиграть с анимацией.

Благодаря,

=== EDIT 2014-06-28 ===

В качестве демонстрации того, почему решение класса неопрятно, см. Эту скрипту: http://jsfiddle.net/Y9L4x/ (вдохновленный @BiffMaGriff, предлагаемый solutin здесь: http://jsfiddle.net/rte3G/)

Проблема состоит в том, что элементы, которые мелькают, уже могут быть привязаны к рукоятке с несколькими классами.

Я признаю, что сначала могу удалить классы стилей, прежде чем применять "flash" классы, усложнить JavaScript и/или правила CSS и т.д. И т.д.

Но все дело в поиске неклассового решения заключается в том, что этот вариант становится чрезвычайно многословным в реальной ситуации, и вы, как правило, должны программировать каждый проблесковый объект по отдельности, а не опрятный одно-JavaScript-function-fits- все, что я ищу.

cartbeforehorse 25 май 2014, в 21:25

Источник

5

как правило, проще переключать класс, пусть правило для класса обрабатывает различные свойства стиля
charlietfl 25 май 2014, в 19:15

Теги:

javascript

jquery

css

3 ответа

2

Вы захотите сделать свои стили как классы.

.activated{
    background-color: red; //or whatever else
}

а затем с помощью jquery вы можете просто переключать их несколько раз с задержками, которые, как я полагаю, у вас уже есть в вашем javascript.

$jq_obj.toggleClass('activated');

Biff MaGriff 25 май 2014, в 16:29

0

Ну да. Это решение, которое я представил в своей преамбуле. Но это именно тот ответ, который я просил вас НЕ предоставлять. То, что я хочу знать, является окончательным Да / Нет в вопросе, может ли это быть сделано по-другому?
cartbeforehorse 25 май 2014, в 19:29
0

Однако, возможно, вы могли бы предложить лучший способ вставить «задержки», о которых вы упомянули. Функциональность setTimeout я сейчас реализую, беспорядочная, учитывая, что она асинхронная. Что нам действительно нужно, так это синхронная функция delay() .
cartbeforehorse 25 май 2014, в 19:34
0

@cartbeforehouse, есть ли конкретная причина, по которой вам не нужно это решение, кроме любопытства, если другое возможно? Если у вас есть мощный механизм стилизации под рукой, почему вы предпочитаете смешивать информацию о стилях в своем javascript?
Vincent van der Weele 25 май 2014, в 19:55
0

@cartbeforehorse Если вы хотите сохранить существующий стиль без классов. Почему бы вам просто не сохранить существующий стиль, прежде чем делать перепрошивку. var s = $jq_obj.attr('style'); и затем установите его обратно, когда вы закончите. $jq_obj.attr('style', s); .delay() касается задержки, вы можете использовать встроенный jquery .delay() но он может не работать с вашими методами. api.jquery.com/delay
Biff MaGriff 26 май 2014, в 02:12
0

@Heuster Я заметил, что если вы делаете это с классами, «мигающая» функциональность не так хороша. Вспышка в JavaScript намного быстрее. Вспышка с переключением классов дает браузеру возможность быстро обновлять стиль. Так как вспышка длится около секунды, даже небольшая задержка очень заметна.
cartbeforehorse 18 июнь 2014, в 14:31
0

@BiffMaGriff Я думаю, что уже пробовал это, и была причина, по которой это не сработало. Но я могу ошибаться. Прошло много времени, и работа продолжилась. Но я вернусь и протестирую в какой-то момент, и дам вам знать.
cartbeforehorse 18 июнь 2014, в 14:37
0

@cartbeforehorse Если серьезно, просто используйте классы. jsfiddle.net/rte3G
Biff MaGriff 18 июнь 2014, в 15:06
0

@BiffMaGriff Причина, по которой это усложняется с классами, заключается в том, что у объекта уже есть класс, а у этого класса есть атрибут :hover в CSS. Атрибут :hover мешает (имеет приоритет над) toggleClass('flash-on') , что означает, что мигающая функциональность скрыта (потому что пользователь все-таки нажал на ссылку, что автоматически означает, что он toggleClass('flash-on') на объект). По сути, мне нужен JavaScript, чтобы получить контроль от CSS во время цикла флэш-памяти, а затем передать управление обратно CSS, когда это будет сделано.
cartbeforehorse 27 июнь 2014, в 20:28
0

@BiffMaGriff Вот почему он не работает с классами: jsfiddle.net/Y9L4x . Конечно, я признаюсь, что вы могли как-то программировать, но, надеюсь, вы понимаете, почему я выбрал решение JavaScript из этого примера.
cartbeforehorse 28 июнь 2014, в 11:06
0

Классы @cartbeforehorse -> jsfiddle.net/Y9L4x/1
Biff MaGriff 29 июнь 2014, в 04:33
0

@BiffMaGriff Ты не ошибаешься. Как я признался в прошлый раз, есть способы кодирования вокруг этой проблемы. Однако в реальном мире я не играю с CSS-файлами длиной 10 строк - они имеют длину 10 000 строк. Удаление класса нежелательно, так как 80% его свойств требуется во время прошивки. Я знаю, что могу перепрограммировать 80% обратно в класс «.acactive», но это излишне многословно. Пожалуйста, обратите внимание, что мой оригинальный вопрос не «как мне запрограммировать ограничения». Скорее, это: «Есть ли что-то, чего я не знаю о JS, что позволило бы мне делать то, что я описываю».
cartbeforehorse 29 июнь 2014, в 17:27

Показать ещё 9 комментариев

0

Попробуй это:

$jq_obj.attr('style','');

MasqueradeCircus 25 май 2014, в 17:53

0

Хорошая попытка, покупай, боюсь, нет, это не работает.
cartbeforehorse 25 май 2014, в 19:28

Ещё вопросы

как правило, проще переключать класс, пусть правило для класса обрабатывает различные свойства стиля
Ну да. Это решение, которое я представил в своей преамбуле. Но это именно тот ответ, который я просил вас НЕ предоставлять. То, что я хочу знать, является окончательным Да / Нет в вопросе, может ли это быть сделано по-другому?
Однако, возможно, вы могли бы предложить лучший способ вставить «задержки», о которых вы упомянули. Функциональность setTimeout я сейчас реализую, беспорядочная, учитывая, что она асинхронная. Что нам действительно нужно, так это синхронная функция delay() .
@cartbeforehouse, есть ли конкретная причина, по которой вам не нужно это решение, кроме любопытства, если другое возможно? Если у вас есть мощный механизм стилизации под рукой, почему вы предпочитаете смешивать информацию о стилях в своем javascript?
@cartbeforehorse Если вы хотите сохранить существующий стиль без классов. Почему бы вам просто не сохранить существующий стиль, прежде чем делать перепрошивку. var s = $jq_obj.attr('style'); и затем установите его обратно, когда вы закончите. $jq_obj.attr('style', s); .delay() касается задержки, вы можете использовать встроенный jquery .delay() но он может не работать с вашими методами. api.jquery.com/delay
@Heuster Я заметил, что если вы делаете это с классами, «мигающая» функциональность не так хороша. Вспышка в JavaScript намного быстрее. Вспышка с переключением классов дает браузеру возможность быстро обновлять стиль. Так как вспышка длится около секунды, даже небольшая задержка очень заметна.
@BiffMaGriff Я думаю, что уже пробовал это, и была причина, по которой это не сработало. Но я могу ошибаться. Прошло много времени, и работа продолжилась. Но я вернусь и протестирую в какой-то момент, и дам вам знать.
@cartbeforehorse Если серьезно, просто используйте классы. jsfiddle.net/rte3G
@BiffMaGriff Причина, по которой это усложняется с классами, заключается в том, что у объекта уже есть класс, а у этого класса есть атрибут :hover в CSS. Атрибут :hover мешает (имеет приоритет над) toggleClass('flash-on') , что означает, что мигающая функциональность скрыта (потому что пользователь все-таки нажал на ссылку, что автоматически означает, что он toggleClass('flash-on') на объект). По сути, мне нужен JavaScript, чтобы получить контроль от CSS во время цикла флэш-памяти, а затем передать управление обратно CSS, когда это будет сделано.
@BiffMaGriff Вот почему он не работает с классами: jsfiddle.net/Y9L4x . Конечно, я признаюсь, что вы могли как-то программировать, но, надеюсь, вы понимаете, почему я выбрал решение JavaScript из этого примера.
@BiffMaGriff Ты не ошибаешься. Как я признался в прошлый раз, есть способы кодирования вокруг этой проблемы. Однако в реальном мире я не играю с CSS-файлами длиной 10 строк - они имеют длину 10 000 строк. Удаление класса нежелательно, так как 80% его свойств требуется во время прошивки. Я знаю, что могу перепрограммировать 80% обратно в класс «.acactive», но это излишне многословно. Пожалуйста, обратите внимание, что мой оригинальный вопрос не «как мне запрограммировать ограничения». Скорее, это: «Есть ли что-то, чего я не знаю о JS, что позволило бы мне делать то, что я описываю».
Хорошая попытка, покупай, боюсь, нет, это не работает.

cartbeforehorse · Accepted Answer · 2014-06-28T12-02-00.000Z

Прямой ответ на вопрос представляется простым "Нет".

Вы не можете сказать JavaScript для стиля объекта, а затем на более позднем этапе попросите JavaScript вернуть стиль ответственности CSS.

Тем не менее, еще одна беспорядочная работа - это перерисовать HTML внутри элемента, который содержит ваш проблесковый объект.

$jq_flashing_obj.parent().html(original_html_);

У этого есть небольшая накладная необходимость обернуть ваш проблесковый объект внутри элемента div или span, чтобы гарантировать, что родительский элемент содержит ничего, кроме вашего мигающего элемента.

<div class="multiple-children">
    <a href="#">link 1</a>
    <span class="wrapper"><a href="#">Click me to watch me flash</a></span>
    <a href="#">link 3</a>
</div>

Вы, конечно, должны захватить внешнийHTML своего мигающего объекта до начала мигания.

original_html_ = $jq_obj[0].outerHTML;

Полученный JavaScript немного немного подробный, как вы видите здесь: http://jsfiddle.net/CgsLs/. Однако он имеет следующие преимущества:

Многоразовый на всех элементах clickable CSS :hover и другое грязное моделирование
Может опционально определять цвет вспышки элемента внутри JS
Независимо от CSS, что означает, что код находится в одном файле и, следовательно, более удобен в обслуживании

Есть также сторонники

Требуется использование функции JQuery on() (в отличие от простого обработчика события click)

Anyhoo... это не может быть решением для всех. В некоторых случаях (возможно, даже в большинстве случаев) опция класса может быть проще.

Но это еще один возможный метод решения этого неотъемлемого недостатка в технологии JavaScript/браузера.