将两个值都传递给CSS中的变量 [英] Pass both values to variables in CSS

问题描述

我无法将两个值传递给<style>标记中的CSS，它们是:(background-color: --placeholder; color: --placeholdtext;).我可以传递一个或另一个值，但不能两个都传递.然后，我将CSS复制到剪贴板.如果我将此代码放在函数的末尾:

I can't pass the two values to the CSS in <style> tags, they are: (background-color: --placeholder; color: --placeholdtext;). I can pass either one or the other value, but not both. I copy the CSS to the clipboard then. If I put this code at the end in the function:

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

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

then it passes value of --placeholdtext;. If I put the other at the end:

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

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

then it passes value of --placeholder;. I need to pass both.

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="" />

推荐答案

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

You have some repetitive code in your example. For example you can chain replace method which means that you can avoid having two separate code for color and background color.

请参见以下示例:

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="" />

这篇关于将两个值都传递给CSS中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！