MAJOR BUG - $W.style doesn't work!

Ask the community
,
1

This Velo bug breaks my code on multiple Editor X websites!!!

Getting an element’s style properties using Velo has stopped working !! all properties return undefined!!

Example:
Home | My Site (editorx.io)

I created a blank a page with 1 box that has a red background.
The only code that’s running is this:

$w.onReady(function () {
    console.log($w("#box1").style.backgroundColor);
    console.log($w("#box1").style);
});

Here’s what’s printed to the console:
undefined
{}

meaning backgroundColor is undefined and style element is an empty object.

This is a fundamental functionality that is widely used, please fix this asap!!!

2

Hi George,

This isn’t a bug, it’s just meant to be empty, so you cannot read the original style of the component, you can only read and write your own styling, and since you didn’t set the style manually, the value remains undefined.

Here’s an example of how the styling might be coded.

const default_bgColor = '#FF0080';
const user_styles = {};

$('#component').style.backgroundColor = user_styles?.backgroundColor || default_bgColor;

So if you haven’t set any styling, your styles will or the background color value is falsy, the default background color will be used instead.

The same happens when you’re trying to read the style from the API

const bgColor = $w('#button').style.backgroundColor;
console.log(bgColor); // Should print: undefined.

Hope this helps~!
Ahmad

3

So I can’t get an element’s style properties using code unless I set it using code?

Thank you for your reply

4

@tisan1 Exactly :blush: You can only read the styles you manually set via code.

5

@ahmadnasriya Cool, I’ll adjust. I just don’t understand the logic behind it ? what’s the point in hiding the original styles?

Thanks again!

6

@tisan1 Since you’re directly editing the value of the style by updating its variables, you’re most likely to break the page if passed the wrong type of the expected value, unlike the methods where the developer can implement checks and validations before accepting the value and updating the style, there’s no protection against these kinds of human errors.