Создание переменных в Javascript для манипулирования CSS box-shadow - PullRequest
Новая
       26

Создание переменных в Javascript для манипулирования CSS box-shadow

0 голосов
/ 26 сентября 2018

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

var box = document.getElementById("boxDiv");
var h-offset; //= getUserInput (= document.getElementById("textareaID").value;)
var v-offset; //= getUserInput
var blur; //= getUserInput
var spread; //= getUserInput
var color; //= getUserInput

box.style.boxShadow =; //(h-offset,v-offset,blur,spread,color)

Я не уверен, как отформатировать строку так, чтобы CSS-тень тени могла ее понять.Спасибо!

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018 

  var first = "10px";
  var second = "20px";
  var third = "red";
  
  $("#bshadow_jquery").css('box-shadow', first + " " + second + " " + third);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style> 
#bshadow_css {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px;
}
#bshadow_jquery {
    border: 1px solid;
    padding: 10px;
}
</style>
</head>
<body>

<h2>box-shadow css: 5px 5px #990000:</h2>
<div id="bshadow_css">
<p>this is a block-shadow by css</p>
</div>

<hr style="margin: 50px 0px">

<h2>box-shadow jquery: 5px 5px #990000:</h2>
<div id="bshadow_jquery">
<p>this is a block-shadow by JQuery</p>
</div>


</body>
</html>
0 голосов
/ 26 сентября 2018

Спасибо.Я понял, что неправильно форматировал строку.

То, что я кодировал: 

 box.style.boxShadow = String(h-offset + v-offset + blur + spread + color);

Что мне нужно было кодировать: 

 box.style.boxShadow = String(h-offset + " " + v-offset + " " + blur + " " + spread + " " + color);

Почти что 'ХорошоДух Момент XD

0 голосов
/ 26 сентября 2018

Вы можете просто объединить строки вместе.Имейте в виду, что вам нужно сначала проверить ввод пользователя.В противном случае box-shadow отображается неправильно, если пользователь вводит неправильное значение. 

box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color;

В ES6 вы также можете использовать строки шаблона : 

box.style.boxShadow = `${offsetX} ${offsetY} ${blurRadius} ${spreadRadius} ${color}`;

Вот живой пример: 

function apply() {
   var box = document.getElementById('box');

   var offsetX = document.getElementById('offsetX').value;
   var offsetY = document.getElementById('offsetY').value;
   var blurRadius = document.getElementById('blurRadius').value;
   var spreadRadius = document.getElementById('spreadRadius').value;
   var color = document.getElementById('color').value;
   
   box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color;
}
#box {
  width: 100px;
  height: 100px;
  background: #f2f2f2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input {
  display: block;
}
<div id="box"></div>

<input id="offsetX" placeholder="offsetX" />
<input id="offsetY" placeholder="offsetY" />
<input id="blurRadius" placeholder="blurRadius" />
<input id="spreadRadius" placeholder="spreadRadius" />
<input id="color" placeholder="color" />

<button onclick="apply()">Apply</button>
...