Блог

Главная - Вопросы по программированию - Как изменить CSS, который использует шаблон Django, с помощью кнопки?

Как изменить CSS, который использует шаблон Django, с помощью кнопки?

#html #css #django #django-templates

Вопрос:

Я пытаюсь реализовать опцию специальных возможностей на своей странице, которая изменила бы CSS на другой файл при нажатии кнопки специальных возможностей.

На данный момент все мои шаблоны расширяются base_generic.html, где загружен файл style.css. Когда будет нажата кнопка специальных возможностей, я хочу, чтобы она изменилась, чтобы использовать style_access.css для этого пользователя. Как я могу этого добиться?

Комментарии:

1. Вы хотите применить другой стиль для авторизованных/неавторизованных пользователей? Опишите, пожалуйста, первоначальную задачу/намерение, которые привели вас к этой концепции решения.

Ответ №1:

Я думаю, что можно было бы сослаться в HTML-шаблоне на оба CSS-файла и использовать функцию onclick с javascript и jquery для изменения идентификатора или класса конкретных элементов шаблона.

Так, например,

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

 <body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<button>This is a div</button>
<h1 class="potatoe" id="hello">HELLO THIS IS TEXT</h1>


<style>
  #hello { color: red; }
  #bye { color: blue; }
</style> 

<script>


var clickCount = 0;

$("button").on("click", function() {
    clickCount  ;
    $(".potatoe").attr("id", clickCount % 2 === 0 ? "bye" : "hello");
});


</script>


</body>

Как вы увидите, каждый раз, когда вы нажимаете кнопку, CSS элемента будет меняться

Это не совсем изменение между файлами CSS, но в конечном итоге изменяет CSS элементов, которые вы хотите выбрать.

Ответ №2:

Вы можете более легко реализовать это с помощью JavaScript:

 const toggleButton = document.getElementById('button');
const workContainer = document.getElementById('work');
 
toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('blue'); 
    toggleButton.classList.toggle('active');
    workContainer.classList.toggle('blue');
 
    if(document.body.classList.contains('blue')){ 
        localStorage.setItem('blue', 'enabled');
    }else{
        localStorage.setItem('blue', 'disabled'); 
    }
});
 
if(localStorage.getItem('blue') == 'enabled'){
    document.body.classList.toggle('blue');
    toggleButton.classList.toggle('active');
    workContainer.classList.toggle('blue');
}
Метки: , ,