Динамически изменить фон тела в html - PullRequest
Новая
       0

Динамически изменить фон тела в html

0 голосов
/ 17 февраля 2020

В нашем приложении я должен написать JSP, который я загружаю в приложение, и в соответствии с JSP отражается пользовательский интерфейс.

В этом я выполняю вызов API и получаю значение Rating это A, B, C, D или E. У меня есть некоторый код для достижения этого и сохранения в переменной - 

String reliabilityRating = getRating();

Исходя из рейтинга, я хочу изменить фон страницы. CSS выглядит следующим образом - 

.rating-A {
    line-height: 23px;
    background-color: #00aa00;
}
.rating-B {
    background-color: #b0d513;
}

.rating-C {
    background-color: #eabe06;
}

Чтобы изменить фон на основе рейтинга, я могу иметь html like - 

<body class="rating-A">

Но это исправлено. Я хочу сделать его динамическим c как rating-X, где X может быть A, B, C, D или E. Поэтому я попытался вызвать метод, который возвращает рейтинг, такой как 

<body class="rating-" + getRating()>

Но это не помогает достичь того, чего я хочу. Не могли бы вы предложить, как я могу изменить фон страницы в зависимости от значения переменной c?

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

Я думаю, что лучший подход, который вы можете использовать в этом сценарии, - это использовать пользовательский атрибут данных в теге body, который работает как метаданные, и изменить его из файла js.

Вот демонстрационная версия: 

const body = document.body;

const changeRating = rating => body.setAttribute('data-rating', rating);
html, body {
  height: 100%;
}
[data-rating="A"] {
    line-height: 23px;
    background-color: #00aa00;
}
[data-rating="B"] {
    background-color: #b0d513;
}

[data-rating="C"] {
    background-color: #eabe06;
}
<body data-rating="A">
</body>

<button onclick="changeRating('A')">Rating A</button>
<button onclick="changeRating('B')">Rating B</button>
<button onclick="changeRating('C')">Rating C</button>
0 голосов
/ 17 февраля 2020

Судя по этого урока , если вы хотите вывести содержимое выражения Java, вам нужно обернуть его в ${ и }.

Следовательно: 

<body class="rating-${getRating()}">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...