javascript - 需要使用变量 js 将颜色传递给 CSS

Question

我在 <style> 中有将生成的背景颜色传递给 CSS 的代码带有变量的标签，这样我就可以将它复制到缓冲区，我需要对文本颜色做同样的事情。我使用颜色选择器 http://jscolor.com/ .我试图用不同的名称复制相同的逻辑，但没有成功。我也需要能够将此 CSS 代码复制到具有实际字体颜色的剪贴板。

    <script>

  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();


}

function update(jscolor) {

       document.getElementById('button_cont').style.color = '#' + jscolor;


    }

</script>


<style type="text/css">


    #button_cont {
color: #ffffff;
font-size: 18px;
text-decoration: none;
 background-color: --placeholder;
padding: 10px;
/* border: 1px solid #ffffff; */
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
 display: inline-block;
 transition: all 0.4s ease 0s;

} 
</style>



 <a href="#" id="button_cont" >Call to action</a>  

  <button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}" >
    Generate color
</button> 

<button onclick="copyToClipboard('style')">Copy CSS</button> 

我试过了

<script>
function copyToClipboard(element) {
  let currentColor = $("#valueInput").val();
  let currentStyle = $(element).text();

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

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

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


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

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

</script>

Answer 1

您的代码似乎对我有用，请查看此代码段；它出什么问题了？

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

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

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

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


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

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

#button_cont {
  color: #333;
  font-size: 18px;
  text-decoration: none;
  background-color: --placeholder;
  padding: 10px;
  /* border: 1px solid #ffffff; */
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  display: inline-block;
  transition: all 0.4s ease 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="button_cont">Call to action</a>

<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}">
    Generate color
</button>

<button onclick="copyToClipboard('style')">Copy CSS</button>