javascript - 将具有颜色的变量分配给 CSS 中的背景属性

Question

我正在尝试制作一个应用程序，用户可以在其中更改按钮的背景颜色，然后从 <style> 复制 CSS 代码将背景颜色更改的标签放入缓冲区。对于颜色选择器，我使用 http://jscolor.com/ .我想我需要像这样将带有颜色的变量分配给背景属性:background: <?php echo $valueInput; ?>;但我找不到存储它的值，也不知道如何将它传递给变量。我的代码确实复制了 CSS，但没有一些背景颜色，只有这个:.jscolor{valueElement:'valueInput'} .

 <script>

  function copyToClipboard(element) {
 var $temp = $("<input>");
 $("body").append($temp);
 $temp.val($(element).text()).select();
 document.execCommand("copy");
 $temp.remove();
}

</script> 

<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}" >
   Click here to pick a color
</button>
Value: <input id="valueInput" value="ed3330"> 


<?php $valueInput = ".jscolor{valueElement:'valueInput'}"; ?>

   <style type="text/css">
   #button_cont {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: <?php echo $valueInput; ?>;
padding: 10px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
margin-left: 10px;
}

#button_cont:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

   </style>

<div id="button_cont" >CALL TO ACTION</div>  

<button onclick="copyToClipboard('style')">Copy CSS</button>
</div> ```

Answer 1

您可以在 javascript 中使用正则表达式替换来做到这一点。我使用 CSS 变量使正则表达式更可靠。

function copyToClipboard(element) {
  let currentColor = $("#valueInput").val();
  let currentStyle = $(element).text();

  let newStyle = currentStyle.replace('--placeholder', "#"+currentColor);

  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(newStyle).select();
  document.execCommand("copy");
  $temp.remove();
}

#button_cont {
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
  background-color: --placeholder;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
  margin-left: 10px;
}

#button_cont:hover {
  background: #434343;
  letter-spacing: 1px;
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}">
  Click here to pick a color
</button> Value: <input id="valueInput" value="ed3330">


<div id="button_cont">CALL TO ACTION</div>

<button onclick="copyToClipboard('style')">Copy CSS</button>