使用不同的颜色为CSS形状着色 [英] Coloring css shapes with different colors
问题描述
我正在寻找一种为某些CSS形状上色的解决方案(例如，本示例中确实不想使用svg: http://bl.ocks.org/widged/4545199 ，但输出将非常相似).而且，我需要将这些形状及其ID保存在不同的颜色阵列中.
I'm looking for a solution to color some css shapes (don't really want to use svg as in this example: http://bl.ocks.org/widged/4545199 , but the output would be pretty similar). What I need moreover is having these shapes saved with their ID's in different color arrays.
在我的示例中，我使用ID为 asd 和 fgh 的div.我想从左侧的正方形中选择颜色，然后单击以在右侧选择的正方形上色，以便颜色变为先前选择的颜色.
In my example I'm using div's with id's asd and fgh. I want to choose the color from the square on the left and color the squares I select on the right with clicking on them so the color would change to the one previously selected.
我需要一些方法来存储将哪个正方形分配给哪种颜色.后来，我不得不将这些数据传递给php，但我想我将能够独自做到这一点.示例是此处.
And I need some method of storing which of the square is assigned to which colour. Later then I would have to pass this data to php, but I will be able to manage to do this alone, I guess. The example is here.
来源:
index.php
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
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>
推荐答案
我不知道您到底要问什么，但是我认为您正在要求使当前颜色通过PHP，是吧?
I don't know what is exactly your question, but I think that you are asking about to get the current color to pass through PHP, huh?
function getCurrentColor() {
var color = document.getElementById("box").style.backgroundColor;
// you can now use AJAX or a form to pass this value to php
编辑
OP在注释中得到了更好的解释. 您可以:
EDIT
OP was explained better in comment. You can:
// 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形状着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
