html - Setting CSS styling based on value in JavaScript

Question

I am trying to set the CSS style based on a value for the HTML element, how would i do?

.JSP file:

   <div style="margin-left:-14%;margin-top:-2.4%" >
       **<bean:write name="messageFormBean" property="messageVO.messageFormat"/>**
   </div>
                

For now I have set the styling to margin-left: -14%;, but if the value for the highlighted statement (bold) is "A", then the style should be margin-left:-14%;, if it is "B" then it should be margin-left:-3%;.

How would I use conditional operator and set the styling accordingly?

question from:https://stackoverflow.com/questions/65935264/setting-css-styling-based-on-value-in-javascript

Answer 1

Instead of using JS you could add a data attribute on the div element with the value you also print inside, e.g.

<div data-letter="<bean:write ... />"> <!-- or whatever it takes to print the same value here -->
   <bean:write name="messageFormBean" property="messageVO.messageFormat"/>
</div>

and use all the necessary CSS attribute selectors to set all the properties you need

[data-letter="A"] { margin: -2.4% 0 0 -14% }
[data-letter="B"] { margin: -2.4% 0 0 -3% }
...

[data-letter="Z"] { margin: ... }

Benefit of this approach: no unnecessary use of JS, no CSS-in-JS and no inline style.