Я ищу решение для окраски некоторых css-фигур (на самом деле не хочу использовать svg, как в этом примере: http://bl.ocks.org/widged/4545199, но выход будет очень похожим). Более того, мне нужны эти формы, сохраненные с их идентификаторами в разных цветовых массивах.Окрашивание css-форм с разными цветами

В моем примере я использую Div с идентификаторами ASD и FGH. Я хочу выбрать цвет из квадрата слева и покрасить квадраты, которые я выбираю справа, нажав на них, чтобы цвет изменился на ранее выбранный.

И мне нужен какой-то способ хранения, какой из квадратов присвоен цвету. Позже мне пришлось бы передавать эти данные на 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>

источник

2015-07-28 crusty

ваше ожидание на примерах и предложениях ... мы все ждем ваших попыток, которые не работают? –

вы правы. отредактировал – crusty

Я не знаю, что именно ваш вопрос, но я думаю, что вы спрашиваете, чтобы получить текущий цвет, чтобы пройти через PHP, а?

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

EDIT

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]; 
      } 
     } 
}

Удачи вам!

источник

2015-07-28 11:59:54

На самом деле я ищу способ 1) доступ к выбранному в данный момент цвету по всему миру по js 2) используйте его, чтобы нарисовать другие 2 квадрата с разными идентификаторами 3) проверьте, какие из них имеют какой из цветов – crusty

I edit ответ –

И все квадраты могут иметь разные цвета ... Мне нужно быть более конкретным, извините: P – crusty

Окрашивание css-форм с разными цветами

ответ

EDIT

Смежные вопросы