@Scryppi

Как изменить стили через сайт?

Надо сделать страницу, на которой пользователь сможет изменить цвет, размер блоков, картинку и тд. через поля. Для печати. Думаю буду делать с помощью vue. Но хотелось бы узнать, чтобы велосипед не изобретать. Есть ли какие-то готовые решения для этого?
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
IlyaDeveloper
@IlyaDeveloper
Top Rated | Expert Web Developer
Конечно можно и через vue, все сделать но я согласен с Микола Деревло смылла тянуть целый фреймворк не вижу если же конечно сама страница уже не имеет задачи быть маленьким SPA приложение, если же там будет развиваться страница в будущем будет серьезный функционал то тогда есть смысл брать какой-то фреймворк , и развивать как душа желает, я бы рекомендовал angular или react, я не могу утверждать но мне кажется что под эти фреймы на данный момент времени, можно найти чуть побольше написаных готовых решений чем под vue,

Вот сворганил тебе за 5 мин, правда не на чистом JS а на jquery, но и на чистом не проблема смотри
здесь

Разметка
<div class="container">
  <div class="blocks">

    <div class="block">
      Блок #1
    </div>

    <div class="block">
      Блок #2
    </div>

    <div class="block">
      Блок #3
    </div>

    <div class="block">
      Блок #4
    </div>
  </div>
  
  <div class="settings"> 
   <div class="">
     <label for="">Цвет</label>
     <input class="color-val" type="text">
     <button id="changeColor">Сменить</button>
   </div>
   
   <div class="">
     <label for="">Ширина</label>
     <input class="width-val" type="text">
     <button id="changeWidth">Сменить</button>
   </div>
   
   <div class="">
     <label for="">Высота</label>
     <input class="height-val" type="text">
     <button id="changeHeight">Сменить</button>
   </div>     
  </div>
</div>

Обработка собитий
$(function() {
 //замена цвета блоков
 $("#changeColor").click(function(){
   var parmColor = $(".color-val").val();
  
    $(".block").css( { backgroundColor: parmColor });
  });
   //замена ширины блоков
 $("#changeWidth").click(function(){
   var parmWidth = $(".width-val").val();
   if (parmWidth > 40) {
   	$(".block").css( { width: parmWidth });
   }
  });
   //замена высоты блоков
 $("#changeHeight").click(function(){
   var parmHeight = $(".height-val").val();
  
    $(".block").css( { height: parmHeight });
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@mukoladerevlo
веб-разработка, электроника
зачем тянуть в такую елементарную задачу целый фреймворк. Используйте javascript и css variables, потом в css root меняйте значение переменных через js
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект
18 апр. 2024, в 21:56
2000 руб./за проект