Assign a variable with the color to the background property in CSS

Question

I'm trying to make an app where the user can change the bg color of a button and after that copy the CSS code from the <style> tags with changed background color into the buffer. For the color picker, I use http://jscolor.com/. I think I need to assign a variable with the color to the background property like this: background: <?php echo $valueInput; ?>; but I can't find the value where it's stored and doesn't know how to pass it to the variable. My code does copy the CSS but instead of some background color there is just this: .jscolor{valueElement:'valueInput'}.

 <script>

  function copyToClipboard(element) {
 var $temp = $("<input>");
 $("body").append($temp);
 $temp.val($(element).text()).select();
 document.execCommand("copy");
 $temp.remove();
}

</script> 

<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}" >
   Click here to pick a color
</button>
Value: <input id="valueInput" value="ed3330"> 


<?php $valueInput = ".jscolor{valueElement:'valueInput'}"; ?>

   <style type="text/css">
   #button_cont {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: <?php echo $valueInput; ?>;
padding: 10px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
margin-left: 10px;
}

#button_cont:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

   </style>

<div id="button_cont" >CALL TO ACTION</div>  

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

What do you need PHP for? Sounds like a Javascript/CSS issue — brombeer, Nov 12 '19 at 12:19
PHP and JS do not run at the same time; first, PHP runs on the server, once. The output is sent to the browser, where JS starts running. You need to break this down into parts: 1) get a style rule's CSS code 2) change a property value 3) copy the result to the clipboard — , Nov 12 '19 at 12:20
from the document of Jscolor, you just need get value of `#valueInput` and do what you want, no need to php. if you want to change background color just set this value to body background or what element you want — ttrasn, Nov 12 '19 at 12:21
@EvgenySudakov do you want to copy the entire CSS with the new color added? — Kalimah, Nov 12 '19 at 12:38

Kalimah · Accepted Answer · 2019-11-12T13:42:37.130

1

You can do it using regexp replacement in javascript. I used CSS variable to make the regexp more reliable.

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

#button_cont {
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
  background-color: --placeholder;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
  margin-left: 10px;
}

#button_cont:hover {
  background: #434343;
  letter-spacing: 1px;
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  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>
<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}">
  Click here to pick a color
</button> Value: <input id="valueInput" value="ed3330">


<div id="button_cont">CALL TO ACTION</div>

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

edited Nov 12 '19 at 13:42

answered Nov 12 '19 at 12:49

Kalimah

11,217
11
43
80

Thanks but it copies so much code, I need just the code in ` – Brgerg30879 Nov 12 '19 at 13:04
I think it copies the console (in stackoverflow) style as well. Try it on your own website and check. – Kalimah Nov 12 '19 at 13:06
Yes now it copies the right code only instead of color there's only `var(--btn-bg);` – Brgerg30879 Nov 12 '19 at 13:20
Yes. This is CSS variable. It take the value from `:root{ --btn-bg: #COLOR; }` – Kalimah Nov 12 '19 at 13:25
Thanks but how to put there actual color, I need just like: `background: #64E8ED;` – Brgerg30879 Nov 12 '19 at 13:30
You helped me a lot! Maybe you also know how to pass two values`$temp.val(newStyle).select();` and `$tempt.val(newtextStyle).select(); ` at the same time? https://stackoverflow.com/questions/58901781/pass-both-values-to-variables-in-css – Brgerg30879 Nov 17 '19 at 20:10

score 0 · Answer 2 · answered Nov 12 '19 at 12:37

your code here :

   <?php $valueInput = ".jscolor{valueElement:'valueInput'}"; ?>

..does exactly what you tell it to do; you've set $valueInput to be a string with value .jscolor{valueElement:'valueInput'}.

Later on you echo this variable inside your <style> tags, and since it's value is set to be .jscolor{valueElement:'valueInput'}, your code will actually print out that string without processing it any further.

You can check what value is set for a variable by using var_dump($variable), this function will tell you what type of variable you've set and what its value is. For more info: https://www.php.net/manual/en/function.var-dump.php

colorpicker.js comes with some examples on its website for help you figure out how to use it, more details here: http://jscolor.com/examples/

Furthermore, you cannot pass variables from JavaScript to PHP on the same page. JavaScript is client side code, PHP is server side code. More details on this: https://stackoverflow.com/a/36693727/11787139

Assign a variable with the color to the background property in CSS

2 Answers2