Question

我需要动态地将颜色值传递给<input>，以便可以将CSS复制到剪贴板。问题的颜色是当您更改按钮的bg颜色时会自动更改的颜色。它始终是黑色或白色，它本身不会传递给--placeholdtext。现在，它总是复制为白色。我使用http://jscolor.com/。我认为该变量存在于jscolor.js文件中的某个位置，找不到并使用。

我现在拥有的代码：

function copyToClipboard(element) {


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

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

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


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

   
 }
   
 function update(jscolor) {
      
       document.getElementById('button_cont').style.color = '#' + jscolor;


    }

#button_cont {

color: --placeholdtext;
font-size: 18px;
text-decoration: none;
 
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/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" >Call to action</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="text" id="myField" class="jscolor" onchange="update(this.jscolor);" style="display: none;" />

如您所见，我使用document.getElementById('myField').value = currenttextColor;在代码下面的<input>处插入颜色值，但是找不到所需的黑色或白色值变量。

Answer 1

<script type="text/javascript">



 function copyToClipboard(element) {


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



 }  

</script>

将实际颜色传递给js输入中的值

我现在拥有的代码：

1 个答案: