时间戳

首页 > 解决方案 > 根据 JavaScript 中的值设置 CSS 样式

javascript - 根据 JavaScript 中的值设置 CSS 样式

问题描述

我正在尝试根据 HTML 元素的值设置 CSS 样式，我该怎么做？

.JSP 文件：

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

现在我已将样式设置为margin-left: -14%;，但如果突出显示的语句（粗体）的值为“A”，则样式应为margin-left:-14%;，如果为“B”，则应为margin-left:-3%;。

我将如何使用条件运算符并相应地设置样式？

标签： javascripthtmlcss

解决方案

data您可以在元素上添加一个属性，而不是使用 JS，您还可以在div其中打印值，例如

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

并使用所有必要的 CSS属性选择器来设置您需要的所有属性

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

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

这种方法的好处：没有不必要的 JS 使用，没有 CSS-in-JS 和内联样式。

推荐阅读