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

Question

[Scryppi]

Надо сделать страницу, на которой пользователь сможет изменить цвет, размер блоков, картинку и тд. через поля. Для печати. Думаю буду делать с помощью vue. Но хотелось бы узнать, чтобы велосипед не изобретать. Есть ли какие-то готовые решения для этого?

Answer 1

[Пащук Илья]

Конечно можно и через 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 });
  });
});

Comments

[Scryppi]

Спасибо большое) но ответ увидел только сегодня. Сделал чуть по другому. У полей атрибуты data-style и он из них берет значение, которое они принимают, например height, background-color. И когда я из них принимаю эти параметры создаются две переменные. value и style, только через них не получается у меня применить стили к элементу

$(".elem__selected").css({style: value});

$(".elem__selected").css(style, value); не работают

Как задать стили из переменных jquery?

Answer 2

[Микола Деревло]

зачем тянуть в такую елементарную задачу целый фреймворк. Используйте javascript и css variables, потом в css root меняйте значение переменных через js