Как поместить в <img> содержимое JS переменной "data:image/png;base64,iVB...

[Was-Ja]

Пожалуйста, а можно еще спросить на схожую тему...

Хочу поместить в виде фоновой картинки (background-image) такую картинку, которая лежит в JS переменной.

В виде ссылки получается:

document.getElementById("canvas1").style.backgroundImage="url('imgs/m3.png')";

а с переменной - нет:

document.getElementById("canvas2").style.backgroundImage="${pic_m3}";

Обратные кавычки вместо двойных тоже пробовал - не помогает. Пример лежит по адресу: http://www.elegant-nmr.com/iii/m.html

Пожалуйста, подскажите, какие теперь я кавычки и где забыл?

Спасибо!

[рони]

Was-Ja,

document.getElementById("canvas2").style.backgroundImage=`url('${pic_m3}')`;

[Was-Ja]

Ой!!! Как просто-то!!!

СПАСИБО ОГРОМНОЕ!!!

[Was-Ja]

И еще на эту тему, пожалуйста, посоветуйте:

в html у меня куча простых групп полей:
короткое название - подсказка - input для ввода,
я обычно их помещаю в элемент таблицы, получается так:

<td>Experiment Name:</td><td><img width=15 length=15 id="h3" title="It is good idea to provide a name of an experiment here, it will simplify your further search"/></td>
<td><input type="text" class="css_mf" style="width:260px" id="experiment_name" placeholder="My first experiment today"></td>

мне хочется все тексты вынести в какую-то структуру, то есть например

var H = {};
H.DS = {}; // DS - аббревиатура секции
H.DS.EN = {}; // EN - аббревиатура конкретного поля
H.DS.EN.L = "Experiment Name";
H.DS.EN.H = "It is good idea to provide a name of an experiment here, it will simplify your further search";
H.DS.EN.PH = "My first experiment today";

Мне это хочется сделать, чтобы меняя H можно было бы изменить язык.

Я понимаю как в JS заполнить эти поля после того, как все объекты уже появились в html, но тогда код будет нечитаемый.

Скажите, пожалуйста, а можно ли как-то так написать, чтобы встроить каждый такой текстовый элемент (лежащий в JS объекте) в httml, то есть хочется чего-то похожего на:

<td>${H.DS.EN.L}</td><td><img width=15 length=15 id="h3" title=${H.DS.EN.H}/></td>
<td><input type="text" class="css_mf" style="width:260px" id="experiment_name" placeholder=${H.DS.EN.PH}></td>

Спасибо!

[рони]

можно было бы изменить язык.

на всякий случай ... https://javascript.ru/forum/showthre...076#post509074

[Was-Ja]

Спасибо большое!!! Пока забил, и реализовал через innerHTML и аналогичное

[Was-Ja]

Вопрос вдогонку...

Скажите, пожалуйста, а как поместить картинку, которая есть в JS переменной внутрь css?

То есть у меня есть

<script>
var pic_b = [];
pic_b[0]="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB6CAYAAAClS5OpAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGpJREFUaN7t2rENwDAIAEFIw8heHolMYKqku5foELcAOTNxq7uju2MrM6Oq7gszc51zTkTEbFNVs9144ucAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODfcnvs/qIXQqxBMul12GcAAAAASUVORK5CYII=";
</script>

и есть CSS:

</style>
.css_l { border-radius: 14px; border: 2px solid black; color: black; padding: 2px 2px; text-align: center; vertical-align: center; font-size: 14px; margin: 5px 5px; cursor: pointer; }
/* .css_l:focus { outline: none; } */
.css_l::before { content: attr(name); }
.css_l[value='0']::after { content: `url('${pic_p[0]}')`; margin: 1px; } /*  мне хочется сюда нарисовать картинку, что я выше сохранил в JS переменной */
.css_l[value='1']::after { margin: 2px; }
.css_l[value='2']::after { margin: 6px; }
</style>

Поправьте, пожалуйста, что я тут делаю не так!

Спасибо!

[voraa]

Как то так

<style id='ist'>
.css_l { border-radius: 14px; border: 2px solid black; color: black; padding: 2px 2px; text-align: center; vertical-align: center; font-size: 14px; margin: 5px 5px; cursor: pointer; }
/* .css_l:focus { outline: none; } */
.css_l::before { content: attr(name); }
.css_l[value='0']::after { content: `url('${pic_p[0]}')`; margin: 1px; } /*  мне хочется сюда нарисовать картинку, что я выше сохранил в JS переменной */
.css_l[value='1']::after { margin: 2px; }
.css_l[value='2']::after { margin: 6px; }
</style>

var pic_b = [];
pic_b[0]="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB6CAYAAAClS5OpAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGpJREFUaN7t2rENwDAIAEFIw8heHolMYKqku5foELcAOTNxq7uju2MrM6Oq7gszc51zTkTEbFNVs9144ucAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODfcnvs/qIXQqxBMul12GcAAAAASUVORK5CYII=";

let est = document.getElementById('ist'); // Элемент style
let rules = est.sheet.cssRules; // Список правил
let rule;
for (let i = 0; i<rules.length; i++) {			// Ищем правило с нужным селектором
	if (rules[i].selectorText == ".css_l[value='0']::after") {
		rule = rules[i]; break;
	}
}
rule.style.setProperty('content', `url('${pic_p[0]}')`);  //  Задаем нужное свойство

[Was-Ja]

Огромное спасибо, voraa за классное решение!!!

Не думал, что придется так заумно в css заехать, заодно теперь я понимаю, что с css можно делать все, что и с обычными элементами.

Дополнительно обнаружил, что

if (rules[i].selectorText == ".css_l[value='0']::after")

не во всех браузерах работает, но

if (rules[i].selectorText == ".css_l[value=\"0\"]::after")

работает вроде везде.

Еще есть одна хотелка, думал сам осилю, но так пока и не смог... Теперь хочется эту картинку уменьшить - отскалировать. Пробовал добавить

rule.style.setProperty('width', "20%");

но ничего не изменилось.

Пожалуйста, посоветуйте, можно ли как-то встраиваемую картинку отскалировать (она у меня 122 пикселей в высоту, а хочется, например, 24 пикселя или 20%).

Спасибо!

[Alexandroppolus]

for (let i = 0; i<rules.length; i++) {           // Ищем правило с нужным селектором
    if (rules[i].selectorText == ".css_l[value='0']::after") {
        rule = rules[i]; break;
    }
}

в общем виде, рули могут быть медиазапросами, тогда у них нет selectorText, зато есть свой массив cssRules, по которому тоже надо цикл

function findRuleBySel (rules, selectorText) {
  if (!rules || !selectorText) return;
  
  for (let i = 0; i<rules.length; i++) 
    const rule = findRuleBySel(rules[i].cssRules, selectorText) || ((rules[i].selectorText === selectorText) && rules[i]);
    if (rule) {
      return rule;
    }
  }
}