how to select css class attributes from mootools,getStyle()?

Question

I need to clone an object and I try to find how to retrieve class css attributes from mootools

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');

}

but I have not result:

The function clone.getStyle(), not gets the class CSS attributes, only the 'element' attributes. I was tryed for a lot of ways without success.

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

What is the way to do this? thanks

Answer 1

I don't think you can get that from the cloned element, but you could copy that from the original and use .getComputedSize() like this:

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

So your function could look like:

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

Note:
- I added also position:absolute; to the css.
- .getComputedSize() is part of More, so you need to load More also.

Answer 2

Element Method: getStyle

GetStyle() returns css property of the Element as string ( in this case returns width as "300px"). Because of that the mathematical formula is incorrect and returns NaN ( "Not-a-Number" value ), so left and top css styles are not set by MooTools.

Therefore width and height properties should be converted to an integer with toInt() function:

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

Because of creation of large number of elements some optimization of the script is required, like not saving a reference of cloned element, and also, it is enough to find the element to be cloned only once.

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' );
    }   
}