Пожалуйста, а можно еще спросить на схожую тему...
Хочу поместить в виде фоновой картинки (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}')`;
|
Ой!!! Как просто-то!!!
СПАСИБО ОГРОМНОЕ!!! |
И еще на эту тему, пожалуйста, посоветуйте:
в 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>
Спасибо! |
Цитата:
|
Спасибо большое!!! Пока забил, и реализовал через innerHTML и аналогичное
|
Вопрос вдогонку...
Скажите, пожалуйста, а как поместить картинку, которая есть в 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>
Поправьте, пожалуйста, что я тут делаю не так! Спасибо! |
Как то так
<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]}')`); // Задаем нужное свойство
|
Огромное спасибо, 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%). Спасибо! |
Цитата:
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;
}
}
}
|
| Часовой пояс GMT +3, время: 04:41. |