Динамическое изменение значения CSS с помощью jQuery

0

У меня есть div:

<div class="badger-left"></div>

Этот CSS:

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
    background-color: attr(bg-color);
}

Этот jQuery добавляет атрибут и класс:

$('.badger-left').addClass('badger-change').attr('bg-color','red');

Поскольку jQuery не может делать :after как в CSS, я думал об этом, но он не работает. Что я должен попробовать?

благодаря

Изменение: цвет будет динамически изменяться из jQuery, он не всегда будет красным.

  • 0
    codepen.io/gc-nomade/pen/qxFIC :) это нормально?
  • 0
    Мне нравятся ответы здесь, они показывают разные подходы к решению этой проблемы, и я знаю, что вы, возможно, не сможете внедрить SASS в свой проект, но мне просто интересно, будет ли это намного проще, если вы используя SASS для создания CSS.
Теги:

4 ответа

2
Лучший ответ

Таким образом, вы не можете передать его в значение цвета, потому что оно будет интерпретироваться как строка вместо ссылки. Вы можете передать значение content чтобы доказать это. В этой заметке вам нужно будет указать :after некоторого макета, либо с содержимым, либо с некоторым отображением или размерами.

Вот хакерский обходной путь. Я лично реорганизовал бы это, чтобы не использовать псевдо-стиль, но это будет работать с вашей текущей реализацией:

function addStyle(color) {
    $('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}

// example addStyle('red');

Рабочая демонстрация: http://jsfiddle.net/3qK2G/

Поделиться
  • 0
    Очень хорошо, большое спасибо :)
2

Как насчет того, чтобы просто изменить класс.badger-left? Итак, сделайте что-нибудь вроде этого:

$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')

с css вот так:

.badger-red:after {
    background-color: red;
}

.badger-blue:after {
    background-color: blue;
}
Поделиться
  • 0
    Привет, извините, я не указал это - цвет будет динамически меняться от jQuery, и может быть много разных цветов. Если я не могу получить цвет из attr 'bg-color', я думаю, что я могу просто добавить несколько классов CS.
  • 0
    @DanyP Проверьте мой пример, вместо того, чтобы переключать класс, просто переключите bg-color codepen.io/gc-nomade/pen/wtnxa или без классов, просто bg codepen.io/gc-nomade/pen/qxFIC
2

вы можете установить фоновый цвет в .badger-change и иметь .badger-change:after наследования этого значения.

В .badger-change вам нужно установить background-color и скрыть его ширину градиента над ним.

ДЕМО (наведите указатель мыши, чтобы увидеть его в действии)

DEMO 2 изменяет только background-color без переключения классов.

Вы можете думать о другом методе с наследованием, например, фоновое изображение с 1 пикселем, заданное в сотнях пикселей от экрана в родительском контейнере и настроенное как repeat в псевдоэлементе.

Поделиться
1

Установление цвета в CSS перед добавлением будет делать трюк. Затем изменение цвета этих классов приведет к изменению badger-left от изменения класса badger-change нового класса

CSS

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
    background-color: red;
}

JQuery

$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class

$('#button').click(function(){ // When example button is clicked

    $('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue

});

Здесь мы используем кнопку для примера изменения цвета.

HTML

<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />

Например, пример содержимого для badger-left.

Когда страница загружает badger-left, задается новый badger-change класс класса, при этом BG является красным. Затем кнопка запускает jQuery, чтобы изменить цвет классов BG на синий.

Пример JSFiddle

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню