I want to check display property. in uibuilder editor, I set the display property None, but uielement.style.display is Flex in script. So, i have to set all uielements’ display None when i cache it. I think it is inconvenient. do you have any other solution?
Any input would be greatly appreciated. Thank you
In code, check element.resolvedStyle instead of element.style
resolvedStyle indeed provides the expected value, but I would like to know why does it do so while style does not? What’s the difference? Official Unity documentation on the style property specifies that it, and I quote,
To me it seems like should return values parsed from what I defined in UI Builder, but it does not.
It’d be amazing if someone like @uDamian or @arichards chimed in to help clear this matter.
So, in general you should write to element.style (if you need to set any style values in code) and read from element.resolvedStyle.
As for why, this is more of a guess than an explanation but bear with me, style values on an element must be computed from a variety of sources. You may have multiple classes applied to the element, some of these classes may specify values which are relative to the element’s parent, an element may inherit styles from its ancestors in the hierarchy, and it may have inline styles applied to it in UXML or code. These values may also change from frame to frame for a variety of reasons. So, even if element.style exactly matched the values that you see when you select that element in the UI builder, those values may not be the actual values that the element is using for rendering. element.resolvedStyle essentially contains the final calculated values accounting for all sources on the current frame.
Let’s take width for example. In the easiest case, you may have an inline style applied which specifies the width in pixels. In this case you may expect style and resolvedStyle to both contain the same value. However, on the frame that you add that element to the hierarchy while style.width may have the exact value you expect (because you set it just now), resolvedStyle.width may be NaN because that element hasn’t been processed as part of any layout update yet so its true width hasn’t yet been computed. On the next frame, though, resolvedStyle.width should be updated. And that’s the easy case where you have specified a fixed inline style. If instead the element’s width was set in a class to 50%, the actual computed width depends not only on the width of the parent, but also other properties of the parent like border-width and padding, so even if checking style.width returned 50% or 0.5f * parent.style.width, that value could easily be different from the actual rendered width of the element, which you could get from resolvedStyle.width. And it gets a little more complicated again when you consider that transitions (either applied directly to the element or to one of its ancestors) can also modify this value.
2 Likes
@noirb is right and our documentation for VisualElement.style is incorrect in that this will not contain values specified from USS, only the inline styles of the element.
1 Like
Thank you @noirb , your explanation made it as close to crystal clear to me as it gets.
Also, thanks @antoine-unity for confirming! Are there any plans for updating documentation having that in mind? I’m fairly sure others will appreciate less ambiguity too when trying to understand how UI Toolkit works.
We will fix the API documentation and I will suggest adding an How To guide to help clarify the topic of retrieving the effective styles of a visual element.
1 Like