Can I access the width and height of an element via code in Wix?

Ask the community
1

I need to get the dimensions of a page element. I have a set of cards that I need to apply a class to based on each card’s aspect ratio.

Something along the lines of:

$w.onReady(function () {
    const repeaterIds = ['repeater1', 'repeater2', 'repeater3'];
    
    repeaterIds.forEach(repeaterId => {
        $w(`#${repeaterId}`).onItemReady(($item, itemData, index) => {
            // Get all boxes in this repeater item
            const cards = $item('@Box');
            
            if (cards && cards.length > 0) {
                cards.forEach((card) => {
                    const width = card.width;
                    const height = card.height;
                    const ratio = width / height;
                    
                    if (ratio > 1) {
                        card.customClassList.add('horizontal');
                        card.customClassList.remove('vertical');
                    } else if (ratio < 1) {
                        card.customClassList.add('vertical');
                        card.customClassList.remove('horizontal');
                    } else {
                        card.customClassList.remove('horizontal');
                        card.customClassList.remove('vertical');
                    }
                });
            }
        });
    });
});
How to get an element height
2

It’s not something that’s supported, since writing code in Wix doesn’t have access to the DOM (unless you’re using Custom Elements).

As a workaround, you could potentially apply a “base custom class” to the elements you want to check, and then with a Custom Element find the elements with those base custom classes, check their width/height and then apply the additional styling you need according to the aspect ratio