修改

Question

我正在寻找为某些css形状着色的解决方案（不要像本例中那样使用svg：http://bl.ocks.org/widged/4545199，但输出结果非常相似）。我还需要的是将这些形状与其ID保存在不同的颜色数组中。

在我的示例中，我使用了id为 asd 和 fgh 的div。我想从左边的方块中选择颜色，然后点击右边的方格，选择我选择的方块，这样颜色就会变为先前选择的颜色。

我需要一些方法来存储哪个方块分配给哪种颜色。之后我将把这些数据传递给php，但我想能够独自完成这项工作。示例是here。

来源：

的index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script>
var colors = ["white","red","blue","green","yellow","purple"];
var index = 0;
function button_click() {
   index = (index + 1) % colors.length;
   document.getElementById("box").style.backgroundColor = colors[index];
}
</script>
<body>
<div id="box" onclick="button_click();"></div>
<div class="t1" id="asd"></div>
<div class="t1" id="fgh"></div>
</body>
</html>

mystyle.css

div#box
{
    width:20px;
    height:20px;
    background-color: white;
    border-color: black;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    float: left;
}
.t1
{
    width:50px;
    height:50px;
    background-color: black;
    border-color: white;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    float: right;
}

等待示例和建议：）

解决方案：

function paint(color,id) {
    var currentID = id;
    document.getElementById(currentID).style.backgroundColor = color;
}

和

<div class="t1" id="asd" onclick="paint(colors[index],this.id);"></div>

Answer 1

我不知道你的问题到底是什么，但我认为你要问的是当前的颜色是否能通过PHP？呵呵？

 function getCurrentColor() {
      var color = document.getElementById("box").style.backgroundColor;
      // you can now use AJAX or a form to pass this value to php

修改

在评论中更好地解释了OP。你可以：

 // add style to 3 boxes
 function button_click() {
     index = (index + 1) % colors.length;
     document.getElementById("box").style.backgroundColor = colors[index];
     document.getElementById("asd").style.backgroundColor = colors[index];
     document.getElementById("fgh").style.backgroundColor = colors[index];
 }


 // returns the current color of #box
 function getColor() {
        return document.getElementById("box").style.backgroundColor;
 }

 function whichIsColor(color) {
       // select all elements
       var els = document.getElementsByTagName("div");
       //iterate through them
       for(var i in els) {
            // if matches the color passed in argument:
            if(els[i].style.backgroundColor === color) {
               return els[i];
            }
       } 
 }

祝你好运！

着色具有不同颜色的css形状

1 个答案:

修改