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

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

本文关键字：属性 getStyle css mootools 选择      更新时间：2024-04-11

我需要克隆一个对象，并试图找到如何从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属性，仅获取'element'特性。我尝试了很多方法都没有成功。

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

做这件事的方法是什么？感谢

我不认为你可以从克隆的元素中获得它，但你可以从原始元素中复制它，并像这样使用.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

注意：
-我还在css中添加了position:absolute;
-.getComputedSize()是More的一部分，因此您还需要加载More。

元素方法：getStyle

GetStyle()将元素的css属性返回为string（在本例中，将width返回为"300px"）。因此，数学公式不正确，并返回NaN（"Not-a-Number"值），因此MooTools不会设置left和top css样式。

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

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' );
    }   
}
相关文章：