Блог

Главная - Вопросы по программированию - Настройка стиля CSS на основе значения в JavaScript

Настройка стиля CSS на основе значения в JavaScript

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь установить стиль CSS на основе значения для элемента HTML, как мне поступить?

Файл .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%; .

Как бы я использовал условный оператор и соответствующим образом установил стиль?

Комментарии:

1. Рассмотрите возможность использования пользовательских свойств css, также известных как переменные css. davidwalsh.name/css-variables-javascript

Ответ №1:

Вместо использования JS вы можете добавить data атрибут к 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 и нет встроенного стиля.

Метки: