时间戳

首页 > 解决方案 > 将具有颜色的变量分配给 CSS 中的背景属性

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

问题描述

我正在尝试制作一个应用程序，用户可以在其中更改按钮的 bg 颜色，然后将 CSS 代码从<style>具有更改背景颜色的标签复制到缓冲区中。对于颜色选择器，我使用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> ```

标签： javascriptphpcss

解决方案

您可以使用 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>

推荐阅读