Question

我需要克隆一个对象，我试图找到如何从mootools中检索类css属性

的CSS：

.card {
width: 109px;
height: 145px;
}

HTML：

<div id="cards">
    <div class="card" id="c0">
        <div class="face front"></div>
        <div class="face back"></div>
    </div>
</div>

JS：

window.addEvent('domready', function(){
 Duplicacartes();
});
function Duplicacartes(){
 var uiCards= document.getElementById('cards');
 for(var i=1;i<521;i++)
{
        var clone = $('c0').clone();
        clone.set('id', 'c'+i);
        clone.setStyle('left', (clone.getStyle('width') + 20) * (i % 40));
        clone.setStyle('top', (clone.getStyle('height')  + 20) * Math.floor(i / 40));
        clone.inject('cards','bottom');

}

但我没有结果：

函数 clone.getStyle（），不是类CSS 属性，只有'元素'属性。我尝试了很多方法而没有成功。

$('c'+i).getStyle('width'); 
$('c'+i).style.width;
...

这样做的方法是什么？感谢

Answer 1

我认为您无法从克隆元素中获取该内容，但您可以从原始内容中复制该内容并使用.getComputedSize()，如下所示：

var computed = $('c0').getComputedSize();

所以你的功能可能如下：

window.addEvent('domready', function () {
    Duplicacartes();
});
function Duplicacartes() {
    var uiCards = document.getElementById('cards');
    var computed = $('c0').getComputedSize();
    for (var i = 1; i < 521; i++) {
        var clone = $('c0').clone();
        clone.set('id', 'c' + i);
        clone.setStyle('left', (computed.width + 20) * (i % 40));
        clone.setStyle('top', (computed.height + 20) * Math.floor(i / 40));
        clone.inject('cards', 'bottom');

    }
}

Fiddle

注意：
- 我还在{c.1}添加了position:absolute; - .getComputedSize()是更多的一部分，因此您还需要加载更多。

Answer 2

Element Method: getStyle

GetStyle()将元素的css属性返回为string（在这种情况下，将width作为"300px"返回）。由于数学公式不正确并返回NaN（“非数字”值），因此MooTools不会设置left和top css样式。

因此，width和height属性应转换为toInt()函数的整数：

clone.getStyle('width').toInt()

由于创建了大量元素，因此需要对脚本进行一些优化，例如不保存克隆元素的引用，而且只需要克隆一次元素就足够了。

window.addEvent('domready', function(){;
    Duplicacartes();
});

function Duplicacartes() {
    var card = $('c0');
    for ( var i=1; i<521; i++ ) {
        card.clone().set({
            id: 'c'+i,
            styles: {
                left:   (card.getStyle('width').toInt() + 20) * (i % 40),
                top:    (card.getStyle('height').toInt() + 20) * Math.floor(i / 40)
            }
        }).inject( 'cards', 'bottom' );
    }   
}

如何从mootools，getStyle（）中选择css类属性？

2 个答案:

Fiddle