Спасибо большое,
Alexandroppolus, за ответ,
я тормоз, и так и не смог вытащить правильный руль.
Итак, имею:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" id="my_style_id">
.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::before { content: attr(name); }
.css_l[value="0"]::after { margin: 6px; }
.css_l[value="1"]::after { margin: 1px; }
.css_l[value="2"]::after { margin: 1px; }
</style>
</head>
<body bgproperties=fixed>
<div id="my_div"> </div>
<script>
var pic_b = [];
pic_b[3]="data:image/png;base64,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";
pic_b[4]="data:image/png;base64,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";
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;
}
}
function ID(id) { return document.getElementById(id); }
function MainMenuInit()
{ // подкрутим картинки в css
let est = ID('my_style_id'); // Элемент style
let rules = est.sheet.cssRules; // Список правил
for (let i = 0; i<rules.length; i++) // печатаем на всякий случай все правила
console.log("[" + i + "]: " + rules[i].selectorText + " : " + rules[i].cssRules);
let rule;
rule=findRuleBySel(rules, ".css_l[value=\"1\"]::after"); // ищем правило с нужным селектором
rule.style.setProperty('content', `url('${pic_b[3]}')`); // засовываем туда картинку
console.log("1: " + rules + " : " + rule);
console.log(CSSStyleRule);
for (let i = 0; i<rule.length; i++) // не понимаю где искать размер, ищу, где могу, но не получается
console.log("[" + i + "]: " + rule[i].selectorText);
// rule=findRuleBySel(rule, "width"); // и тут искал
// console.log("2: " + rule);
// rule.setProperty("width", "20%");
rule=findRuleBySel(rules, ".css_l[value=\"2\"]::after"); // все то же самое для второй картинки
rule.style.setProperty('content', `url('${pic_b[4]}')`);
//
// теперь создаем кнопку с этим стилем
let par = document.createElement("button");
par.innerHTML="CH<sub>3</sub>-";
par.className="css_l";
par.value=1;
par.id="rd";
par.title="CH<sub>3</sub>-";
ID("my_div").appendChild(par);
ID("rd").addEventListener('click', RadicalsOnClick);
}
var RDVal=1;
function RadicalsOnClick() { ID("rd").value = RDVal = (RDVal+1)%3; }
MainMenuInit();
</script>
</body></html>
здесь полный пример, где, по совету
voraa я вставляю картинки, но, потом безуспешно пытаюсь поменять их размер.
Помогите, пожалуйста, найти правильный руль размера картинки!
Спасибо!