我正在使用 css 制作一个“饼形楔形”,方法是制作一个圆圈,将其剪掉一半,然后变换旋转另一个剪裁矩形,以便仅显示 25 度的弧形。这很好用;一个明确定义了六个这样的饼图的例子是 here .
然而,我想做的只是定义一个饼形楔形,然后使用 cloneNode 通过 javascript 制作其余部分,如下所示:
for (var i = 1; i < 6; i++) {
var el = document.getElementById('slice1');
var child = el.cloneNode(true);
child.id = 'newslice'+i;
child.style.transform = "transform:rotate("+(30+i*60)+"deg)";
el.parentNode.appendChild(child);
}
此(非工作)代码的示例是 here .我做错了什么?
最佳答案
我错误地认为 cloneNode() 会克隆样式。一个可行的解决方案是 here看起来像这样:
for (var i = 1; i < 6; i++) {
var el = document.getElementById('slice1');
var child = el.cloneNode(true);
child.id = 'newslice'+i;
// set the style classes for the cloned element
child.className = " hold";
child.children[0].className = " pie";
// apply its transforms
child.style.transform = "rotate("+(30+i*60)+"deg)";
child.children[0].style.transform = "rotate(25deg)";
el.parentNode.appendChild(child);
}
关于javascript - 我如何在 javascript 中克隆 Node() 并转换这些 CSS 弧线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28484807/