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

【问题标题】：Assign a variable with the color to the background property in CSS将具有颜色的变量分配给 CSS 中的背景属性
【发布时间】：2020-03-08 03:44:24
【问题描述】：

我正在尝试制作一个应用程序，用户可以在其中更改按钮的 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> ```

【问题讨论】：

你需要 PHP 做什么？听起来像是 Javascript/CSS 问题
PHP和JS不能同时运行；首先，PHP 在服务器上运行一次。输出被发送到浏览器，JS 开始运行。您需要将其分解为几部分：1）获取样式规则的 CSS 代码 2）更改属性值 3）将结果复制到剪贴板
不，我也可以使用 Javascript
从 Jscolor 的文档中，你只需要获取 #valueInput 的值并做你想做的事，不需要 php。如果您想更改背景颜色，只需将此值设置为正文背景或您想要的元素
ttrasn，不，我可以改变bg，我不能复制css之后

标签： javascript php css

【解决方案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>

【讨论】：

谢谢，但它复制了这么多代码，我只需要<style>标签中的代码，用户可以将其放在他/她的网站上，与<style>标签中的代码相同，只有实际的bg
我认为它也复制了控制台（在 stackoverflow 中）样式。在您自己的网站上尝试并检查。
是的，现在它只复制正确的代码而不是颜色，只有var(--btn-bg);
是的。这是 CSS 变量。它取值来自:root{ --btn-bg: #COLOR; }
谢谢，但是如何把实际颜色放在那里，我需要的是：background: #64E8ED;

【解决方案2】：

你的代码在这里：

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

.. 完全按照您的指示去做；您已将 $valueInput 设置为 字符串，其值为 .jscolor{valueElement:'valueInput'}。

稍后您在 <style> 标记中回显此变量，并且由于它的值设置为 .jscolor{valueElement:'valueInput'}，因此您的代码实际上会打印出该字符串而无需进一步处理。

您可以使用var_dump($variable) 来检查为变量设置了什么值，该函数会告诉您您设置了什么类型的变量以及它的值是什么。欲了解更多信息：https://www.php.net/manual/en/function.var-dump.php

colorpicker.js 在其网站上提供了一些示例，以帮助您了解如何使用它，更多详细信息请参见：http://jscolor.com/examples/

此外，您不能在同一页面上将变量从 JavaScript 传递到 PHP。 JavaScript 是客户端代码，PHP 是服务器端代码。更多详情：https://stackoverflow.com/a/36693727/11787139

【讨论】：