文章/答案/技术大牛

发布

社区首页 >问答首页 >将这两个值传递给CSS中的变量。

问将这两个值传递给CSS中的变量。
EN

Stack Overflow用户

提问于 2019-11-17 14:58:46

回答 1查看 163关注 0票数 1

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

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

然后它传递--占位符的值；我要两者都通过。

剧本：

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

javascript

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-17 21:28:49

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

参见此示例：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58901781

复制

相似问题

问将这两个值传递给CSS中的变量。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将这两个值传递给CSS中的变量。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将这两个值传递给CSS中的变量。
EN