B4J Question [BANano] [SOLVED] How to successfully set styles starting with '--' using BANanoElement.SetStyle?

[Mashiane]

Hi there

<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;">70%</div>
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;">70%</div>

How can I assign styles like this "--value:70" with BANanoElement.SetStyle? I'm trying to set the value to be dynamic?

Thank you

 

[alwaysbusy]

You can not use the normal SetStyle methods on CSS variables because they hold a 'live' value. So you have to set/get them using special methods that can access the computed styles:

Sub SetVariable(el As BANanoElement, var As String, value As Object)
    el.GetField("style").RunMethod("setProperty", Array(var, value))
End Sub

Sub GetVariable(el As BANanoElement, var As String) As Object
    Dim computed As BANanoObject
    computed.Initialize4("getComputedStyle", el.ToObject) ' note that computed is read-only!
    Return computed.RunMethod("getPropertyValue", var)
End Sub

Sub RemoveVariable(el As BANanoElement, var As String)
    el.GetField("style").RunMethod("removeProperty", var)
End Sub

Usage example:

' get the body tag
Dim body As BANanoElement
body.Initialize("body")
' set    
SetVariable(body, "--value", "70")
' get    
Log(GetVariable(body, "--value")) ' returns 70
' remove    
RemoveVariable(body, "--value")
' get again    
Log(GetVariable(body, "--value")) ' returns empty

Alwaysbusy

 

[Mashiane]

Thank you so much, works perfectly!