Setting the styles of an element programatically.

[jeanmichel]

It is possible to set the style of an element programatically.

The developer in this example would like to set a base CSS style programatically after the onArrive event is fired, while having changed the position of the output field manually.

The global CSS style BaseCSS is defined in the application styles settings.

Code: Select all

var currentstyle = { "_base":"BaseCSS"};
var element= FIELDS("Z2");
 
element.setProperty("style",currentstyle ); 
  
element.refresh();

This code will cause the base css properties to be applied successfully however resetting the location of the output field to its default place on the screen. The reason for this is that the variable currentstyle only contains the base style name, thus loosing all position related CSS properties.

Consider this code to achieve the expected result.

Code: Select all

var element= FIELDS("Z2");

//get the current style
var currentstyle = element.setProperty("style");

//add the _base in the current style
currentstyle._base = "BaseCSS";

//Set the current style
element.setProperty("style",currentstyle ); 
  
element.refresh();

This idea is to to get the value of the styles property of the element first. Then, the base css value is added to the currentstyle structure, and then reapplied to the element.