需要使用可变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

你的代码似乎对我有用，看看这个 sn-p;它出什么问题了？

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>

Answer 2

function copyToClipboard(element) {
  // input value
  let currentColor = $("#valueInput").val();

  // style block content
  let currenttextStyle = $(element).text();

  // replace the style block content with the input color value
  let newtextStyle = currenttextStyle.replace('--placeholdtext', "#" + currentColor);

  // create an input field, set the new style content and execute copy to hold the content
  var $tempt = $("<input>");
  $("body").append($tempt);
  $tempt.val(newtextStyle).select();
    try { 
        success = document.execCommand("copy", false, null);
    }
    catch (e) {
        alert(e)
    }
    //alert(success)
  $tempt.remove();
}

关键要求是该功能应该由用户点击等动作触发，否则会失败，'success'标志为false。