Реализация динамической CSS в Django: динамически изменяется только один элемент. Как? - PullRequest
Новая
       0

Реализация динамической CSS в Django: динамически изменяется только один элемент. Как?

0 голосов
/ 16 мая 2011

Я хотел бы установить один единственный стиль CSS, который динамически получает фон из некоторой переменной django.

Я думаю, что дополнительная трудность заключается в том, что она связана с: hover.

Исходный статический код style.css работает так: 

.titles-button h2 a {
    margin-left: 4em;
    margin-right: 4em;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    width: 240px;
    height: 80px;
    /* background: transparent url(../logos/djangoVX_logo.png) center left no-repeat; */
    text-indent: -999em;
    border: 1px dashed green;
}
.titles-button h2 a:hover {
    /* background: transparent url(../logos/djangoVX_logo2.png) center left no-repeat; */
}

Обратите внимание, что фон теперь прокомментирован.

Я хотел бы использовать этот стиль в DIV и динамически обновлять фон.

Как: 

{% if the_apps_list %}
    {% for apps in the_apps_list %}
    <div class="titles-button"> 
        <h2><a href="/{{ apps.app_name }}/" style="X">{{ apps.app_name }}</a></h2> 
    </div>
    {% endfor %}
{% else %}
    <p>No APPS are available. Internal Error.</p>
{% endif %}

Я приложил все усилия для «Х», но безрезультатно.

За исключением: - Переписать полный стиль в X - Используйте некоторые необычные вещи в JavaScript (on_mouse_over ...) - Я даже видел класс: inheritALL

Ничто из этого решения не соответствует моей идее использования django.

Я мог бы получить быка не с той стороны ...

.. какая из них правая?

веселит F

1 Ответ

0 голосов
/ 17 мая 2011

Допустим, у вас есть "темная" и "светлая" версии фона.Ваш код может выглядеть следующим образом:

views.py: 

...
if i_want_dark_version:
    context['style']='dark'
else:
    context['style']='light'

template.html: 

<div id="titles-button" class="{{ style }}">
    ...
</div>

style.css: 

#titles-button.dark h2 a {
    background: ...;
}
#titles-button.dark h2 a:hover {
    background: ...;
}

#titles-button.light h2 a {
    background: ...;
}
#titles-button.light h2 a:hover {
    background: ...;
}
...