Принудительно пересчитать $ (...). Css ("background-image") при перезагрузке связанной таблицы стилей

Question

(мне нужна только функциональность в Chrome)

Контекст:
Я работаю над сценарием node.js, который автоматически просматривает файлы, которые он обслуживает для изменений, а затем использует подключение через веб-сокет, чтобы отправить сообщение на контрольную страницу в браузере, которая управляет перезагрузкой ресурсов. Например, если html-страница имеет <img href="foo.jpg" />, сервер будет смотреть jpg и отправлять на страницу сообщение об изменении «foo.jpg». На этом этапе я использую javascript для перезагрузки, перезагрузите изображение (src = src + "? Cachbust = 00002" или что-то в этом роде).

Проблема:
Когда фоновое изображение изменяется, я перебираю элементы страницы, чтобы найти любые ссылки на изображение, и сбрасываю его с новой строкой запроса, чтобы перезагрузить его. Для этого я использую решение jquery $(...).css("background-image", ...). Это работает, но когда я впоследствии изменяю значение для URL в css (то есть background: url (foo.jpg); => background: url (bar.jpg)), значение background-img не изменяется ,

Для изменений css мой скрипт перезагружает связанную таблицу стилей. Я подозреваю, что значение, которое я назначил с помощью javascript, имеет приоритет над значением, которое правило css в связанной таблице стилей представляет собой встроенный атрибут стиля.

Вопрос:
Есть ли способ заставить Chrome пересчитать и применить значение из внешней таблицы стилей и применить к элементам, стили которых были назначены с помощью функциональности jquery $(...).css("...","...")?

Спасибо всем.

Answer 1

Как правило, если вы хотите изменить / перезагрузить фоновое изображение для какого-либо события, попробуйте встроить диапазон или другой элемент в основной элемент и установите для него фоновое изображение. Затем вы можете заменить этот элемент без перезагрузки всей таблицы стилей. Примерно так:

<div class="content-element">
    <span class="bg-image-element" style="background-image: url('old.png')"></span>
    <!-- .... other stuff .... -->
</div>

<script>
    $('.some-element').someEvent(function() {
        $('.bg-image-element').replaceWith(<span class="bg-image-element" style="background-image: url('new.png')"></span>
    });
</script>

Я не видел непротиворечивого поведения при изменении только фонового изображения css с помощью javascript / jQuery works. Но замена всего элемента, кажется, вызывает перезагрузку фонового изображения.

Answer 2

Для изменений css мой скрипт перезагружает связанную таблицу стилей. Я подозреваю, что значение, которое я назначил с помощью javascript, имеет приоритет над значением, которое правило css в связанной таблице стилей представляет собой встроенный атрибут стиля.

Совершенно верно. Установка CSS с помощью jQuery подобным образом имеет тот же эффект, что и наложение атрибута «style» на элемент (что фактически и происходит). Это переопределяет что-то, полученное с помощью селектора в CSS.

Вы должны иметь возможность отключить локальный стиль для элементов с помощью

$(...).css("background-image", "");