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

Mashiane

Expert
Licensed User
Longtime User
Hi there

B4X:
<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
 
Solution
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:

B4X:
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:
B4X:
' get the body...

alwaysbusy

Expert
Licensed User
Longtime User
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:

B4X:
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:
B4X:
' 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
 
Upvote 2
Solution
Cookies are required to use this site. You must accept them to continue using the site. Learn more…