Change x value of .css file in index.js

[khowder]

Hello,

I am trying to modify the position of my time label (x-axis) of my clock face in the index.js, but it doesn't seem to be working.  I have searched for quite a bit for a solution and have not found anything for this.

my code in my index.js is:

if (hours > 9) {

     timeLabel.style.x = "63%+10";
     timeLabelSecs.style.x = "64%+10";

} else {

     timeLabel.style.x = "63%";
     timeLabelSecs.style.x = "64%";

}

If i do timeLabel.style.fill = "red", the label does appear red.  Is there some reason that I can not change the x value?

Thank you for any help that you may provide.

[Guy_ · Accepted solution]

Hi @khowder  - you can do it in the SVG, it's 

Variable.x = 123;

% can't be used, only absolute values.

[Gondwana]

I think @Guy_  is right. Note that .x is not a property of .style but of the element object (a GraphicsElement?) itself.

[khowder]

Sorry, i should have clarified a bit more.

timeLabel and timeLabelSecs are text with their positions defined in styles.css:

#timeLabel {
font-size: 90;
font-family: System-Light;
text-length: 32;
text-anchor: end;
x: 63%;
y: 42%;
fill: white;
}

#timeLabelSecs {
font-size: 60;
font-family: System-Light;
text-length: 32;
text-anchor: start;
x: 64%;
y: 42%;
fill: darkred;
}

I was wanting to be able to modify the x values in the .css file in that if/else statement

[Gondwana]

The Fitbit API doesn't let you change CSS at runtime. You can only change the class name(s) for a GraphicsElement, meaning that you'd need one class for every value of x. That might be feasible in your case, especially if you use multiple classes per element and put x in a class of its own.

[Gondwana]

Look for class here.

[khowder]

It does let me change the style color with  timeLabel.style.fill = 'red'; instead of what I have written above to try to change x. That's why I was hoping I could move it by changing the x. Thank you for your replies and the help.  I will try something else as you said.

[khowder]

I didn't quite understand what you meant here, but I get it now. I am very new to java.  Thank you for your help.

This is what worked:

if (hours > 9) {
timeLabel.x = 216;
timeLabelSecs.x = 219;
} else {
timeLabel.x = 201;
timeLabelSecs.x = 204;
}