我在 <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>
最佳答案
您的代码似乎对我有用,请查看此代码段;它出什么问题了?
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>
关于javascript - 需要使用变量 js 将颜色传递给 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58858927/