为CSS中的背景属性指定一个具有颜色的变量

Question

我正在尝试制作一个应用程序，用户可以更改按钮的bg颜色，然后将背景颜色更改后的<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中的regexp替换来完成此操作。我使用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>

Answer 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