将两个值都传递给 CSS 中的变量

Question

我无法将这两个值传递给<style> 标签中的 CSS，它们是：(background-color: --placeholder; color: --placeholdtext;)。我可以传递一个或另一个值，但不能同时传递两者。然后我将 CSS 复制到剪贴板。如果我把这段代码放在函数的最后：

var $tempt = $("<input>");
  $("body").append($tempt);
  $tempt.val(newtextStyle).select();
  document.execCommand("copy");
  $tempt.remove();

然后它传递 --placeholdtext; 的值。如果我把另一个放在最后：

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

然后它传递 --placeholder; 的值。我需要两个都通过。

脚本：

function copyToClipboard(element) {


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

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


  var actualColor = window.getComputedStyle(document.getElementById('button_cont')).getPropertyValue('color');

  document.getElementById('myField').value = actualColor;


  let currenttextColor = $(".jscolor").val();
  let currenttextStyle = $(element).text();

  let newtextStyle = currenttextStyle.replace('--placeholdtext', currenttextColor);


  var $tempt = $("<input>");
  $("body").append($tempt);
  $tempt.val(newtextStyle).select();
  document.execCommand("copy");
  $tempt.remove();

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



}

#button_cont {
  background-color: --placeholder;
  color: --placeholdtext;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  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>

<a href="#" id="button_cont">The button</a>

<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}">
    Pick a color
</button>
<input id="valueInput" value="ed3330">
<button onclick="copyToClipboard('style')">Copy button</button></div>
</div>

<input type="hidden" id="myField" class="jscolor" onchange="update(this.jscolor);" value="" />

Answer 1

您的示例中有一些重复的代码。例如，您可以使用链式替换方法，这意味着您可以避免使用两个单独的颜色和背景颜色代码。

看这个例子：

function copyToClipboard(element) {

  let currentColor = $("#valueInput").val();
  let currentStyle = $(element).text();
  var actualColor = $('#button_cont').css('color');

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

  $('#myField').val(actualColor);

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

#button_cont {
  background-color: --placeholder;
  color: --placeholdtext;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  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>

<a href="#" id="button_cont">The button</a>

<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}">
  Pick a color
</button>
<input id="valueInput" value="ed3330">
<button onclick="copyToClipboard('style')">Copy button</button>


<input type="hidden" id="myField" class="jscolor" onchange="update(this.jscolor);" value="" />