What is the best way to choose CSS class attributes using Mootools and the getStyle()

Question

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Seeking to duplicate an object, I am trying to figure out 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');

}

However, I am not getting the desired outcome:

The function clone.getStyle() only retrieves the 'element' attributes, not the class CSS attributes. I have tried numerous methods without success.

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

Can anyone advise on the correct approach? Thank you.

javascript css mootools

Answer 1

Answer №1

It may not be possible to retrieve that information from the cloned element directly, but you can copy it from the original element and utilize .getComputedSize() method like so:

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

Your function can be structured this way:

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 have also included position:absolute; in the css.
- Remember that .getComputedSize() belongs to More, so make sure to load More as well.

Answer 2

It may not be possible to retrieve that information from the cloned element directly, but you can copy it from the original element and utilize .getComputedSize() method like so:

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

Your function can be structured this way:

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 have also included position:absolute; in the css.
- Remember that .getComputedSize() belongs to More, so make sure to load More as well.

Answer 3

Answer №2

Method: Retrieve Element Style

GetStyle() function is used to fetch the CSS property of an element and returns it as a string (for example, returning "300px" for width). However, this can lead to incorrect mathematical calculations resulting in a NaN (Not-a-Number) value, causing issues with setting the left and top CSS styles through MooTools.

To resolve this, it is recommended to convert the width and height properties to integers using the toInt() method:

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

When dealing with a large number of elements, script optimization is necessary. One approach is to avoid storing references to cloned elements unnecessarily, and it is sufficient 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' );
    }   
}

Answer 4

Method: Retrieve Element Style

GetStyle() function is used to fetch the CSS property of an element and returns it as a string (for example, returning "300px" for width). However, this can lead to incorrect mathematical calculations resulting in a NaN (Not-a-Number) value, causing issues with setting the left and top CSS styles through MooTools.

To resolve this, it is recommended to convert the width and height properties to integers using the toInt() method:

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

When dealing with a large number of elements, script optimization is necessary. One approach is to avoid storing references to cloned elements unnecessarily, and it is sufficient 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' );
    }   
}

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Answer №1

Fiddle

Answer №2

Similar questions

Exploring sagas: Faking a response using a call effect

Retrieve data from a specific page on a URL using AJAX

JavaScript Simplified Data Sorting after Reduction

Why isn't the jQuery click() function functioning on my modified HTML?

Node.js: Calculating the number of requests processed per second in the http.get()

Creating a WebExtension using Angular and TypeScript

In the realm of asp.net, the OnClick event springs into action after the

Use vtip jQuery for showcasing titles

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

Assign a CSS class to a DIV depending on the vertical position of the cursor

Adjust the node_modules path tailored to your project

The React engine is triggering an error stating "Module not found."

What is the ternary operation syntax for setting the img src attribute in Angular 8?

Guide to setting up a horizontal button menu and dropdown submenu beneath the navigation bar using Bootstrap 4

Is there a way to adjust this validation logic so that it permits the entry of both regular characters and certain special characters?

Basic Timer with Visual Background

What is the most effective way to implement multiple ng-models within a single function?

Choose the DIV element based on its data attribute using JSON

Whenever I create the code using javascript, padding seems to always show up

Tips for Deploying Your NuxtJS Project on a Shared Hosting Service