<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 javascript jquery html css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我在绘制具有不同形状的 div 时遇到了真正的麻烦。例子是 here .一切都在 html/css/js 中，因此查看它的源代码不会有问题。 css 是否有任何属性可以使其正常工作？我必须一直这样做吗？
问题 - 在 div 的不同部分单击它时，它并不总是改变颜色。
var colors = ["white","red","blue","green","yellow","purple"];
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
function button_click() {
index = (index + 1) % colors.length;
document.getElementById("box").style.backgroundColor = colors[index];
document.getElementById("boxname").innerHTML = " "+names[index];
}
function paint(color,id,type) {
var currentID = id;
if (type=="trapez") {
document.getElementById(currentID).style.borderBottomColor = color;
} else if (type=="triangle_left") {
document.getElementById(currentID).style.borderRightColor = color;
} else if (type=="triangle_right") {
document.getElementById(currentID).style.borderLeftColor = color;
}
}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: white;
border-color: black;
border-style: solid;
border-width: 1px 1px 1px 1px;
float: right;
}
.line{
height:200px;
}
.container{
float:left;
margin-left:10px;
}
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid blue;
border-bottom: 50px solid transparent;
position:absolute;
margin-left:110px;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid green;
border-bottom: 50px solid transparent;
position:absolute;
}
.trapezoid {
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 60px;
}
.trapezoid-rotated {
border-bottom: 50px solid gray;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 60px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}<div id="box" onclick="button_click();"></div><div id="boxname"> none</div>
<div class='line'>
<div class='container'>
<div id='a-1' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');">
</div>
<div id='b-1' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');">
</div>
<div id='center'>
<div id='c-1' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');">
</div>
<div id='d-1' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');">
</div>
</div>
</div>
<div class='line'>
<div class='container'>
<div id='a-2' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');">
</div>
<div id='b-2' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');">
</div>
<div id='center'>
<div id='c-2' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');">
</div>
<div id='d-2' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');">
</div>
</div>
</div>最佳答案
真正的问题是您正在做的是一种 hack，创建具有边框和透明度的三 Angular 形和梯形与创建多边形不同。如果您使用任何浏览器的检查元素，您将看到每个多边形正在使用的区域。
为了让事情更简单，我在 Codepen 上创建了您的代码，并使用 SVG 重新创建了它。 http://codepen.io/laurosollero/pen/aOQmVW
<div class="new">
<h2>And now in SVG</h2>
<div id="box2" onclick="newButtonClick();"></div>
<div id="boxname2"> none</div>
<svg width="400" height="400">
<path id="trapezoid1" style="fill:#a0a0a0;fill-opacity:1;stroke:none" d="M 50,50 350,50 275,150 125,150 z" />
<path id="trapezoid2" style="fill:#ff0000;fill-opacity:1;stroke:none" d="M 50,250 125,150 275,150 350,250 z" />
<path id="triangle1" style="fill:#007100;stroke:none;fill-opacity:1" d="M 50,50 125,150 50,250 z" />
<path id="triangle2" style="fill:#0000ff;fill-opacity:1;stroke:none" d="M 350,50 350,250 275,150 z" />
</svg>
</div>
还有 JS:
var colors = ["white","red","blue","green","yellow","purple"];
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
// new js code
var index1 = 0;
var forms = document.getElementsByTagName("path");
function newButtonClick() {
index1 = (index1 + 1) % colors.length;
document.getElementById("box2").style.backgroundColor = colors[index1];
document.getElementById("boxname2").innerHTML = " " + names[index1];
}
for (var a = 0; a < forms.length; a++) {
var elem = forms[a];
elem.onclick = function() {
// console.log(this);
document.getElementById(this.id).style.fill = colors[index1];
return false;
};
}
我尽量不改动太多原始代码。
SVG 是必经之路。
关于javascript - 无法绘制不同形状的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31678330/