Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 26.01.2021, 14:57
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Спасибо большое, 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 я вставляю картинки, но, потом безуспешно пытаюсь поменять их размер.

Помогите, пожалуйста, найти правильный руль размера картинки!

Спасибо!
Ответить с цитированием
  #22 (permalink)  
Старый 26.01.2021, 16:43
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Изменить размер картинки, вставленной через content нельзя
Можно вставить псевдоэлемент after как блок и задать ему картинку, как background.
Размеры лучше указывать непосредственно в пикселях, т.к. при указании в % эти % берутся не от размера картинки, а от размеров родительского блока.

<!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; 
	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 { 
    display: inline-block;
    background-size: 24px 24px;
    width: 24px; 
   height: 24px;
   position: relative;
	margin: 1px;
	content: ''; 
	vertical-align: middle; 
}
.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,iVBORw0KGgoAAAANSUhEUgAAAH4AAAB+CAYAAADiI6WIAAAACXBIWXMAAAsTAAALEwEAmpwYAAALmUlEQVR42u2deVRTVx7Hv1kIEMK+Ly4gIGELCnIoLrVKcWm1LWJrHVutM1U5pz3T45n2tKd17HR6Tqedc2Y6nbbq1Fp1OnVFqVbrymhlscguWxBBZE/YCYEESOaP1i6OgUBukvde7udPyPu9936f5L1777v393h6vR4U24NPU0DFU2wI4WQ+3DukRHVH0eJaRdn2bnVHyoCmz1GtHaBZtAJikTOc7V3hIfYtDveJy4ryT/zKxd79trHb84y5xytVrfzzNYfTKtquvwZgHk07M4nxTzq2TLruJS+nAIXJ4rNvnVhwSX70E51eF0tTy4J7N4/fkRqx7oXFoU9+O2Xxh4r/8WlZS+5W2hZgHfo5QQvfeGbOy+9PWvyhog/3l7XmbaQ5ZC9zghZue2bOy3uMbtVn12ZuotLZT0nztY+v1GWlGiVeqWpxvSg/9leaNm702i7UHD7YOdjmMqH4c9WHXtdD50Vzxg10ep3v+epDr44rvmdIyatsL9hM08UtbrZd39Kv6eEZFF/dXhQBwIeminP4VLYVRBsUX6soXUxzxE1qFaXJBsV3qTsW0hRxk251R5hB8SpN38M0RdxkQNM3y6D4oRFVAE0RN1FrB0LG7c5ROAsVb6NIqHgKFU/FU2wKIU2BdeCBBzdHL9gJ7DGo7cegtp+K5zKRfglImLYE4T6xEPJFP/1dqWpBUdNV5DZ8i5ExDRXPFZzt3bA+/hUEe0Y+8P/ekkAsl65HcvBy/Kfwb2jsqaX3eLbj5uiFlxa9Z1D6L3Fx8MCW+W8j1DuWimczAr4Qz897Fa4OnsZvwxNiQ8J2uDh4UPFsJSV8LQJcgye9nYNQjJTwdCqejfi7zMTDoaunvH1c0AII+EIqnk3weXykx20DnyeYcgyRwAHT3cOpeDaxaNZqBLqGmBzH3dGbimcLXk7+SJlN5v4sFNhR8WxhTdy2Xw3OmIJK00vFs4GkmakI9pASiaWHDne65VQ803F18MQK6W+IxatTVsBcy9CpeII8JXsR9kJHYvEuyY/RfjzTmRO0EBE+c4nFK26+isYeORXPZJxELlgVtYlYPJWmD6crDph3nIFqM53VMZshFjkTi3eqYh+GRlRUPJOR+sZDFpBMLF5V+w2Ut+ab/bipeBNwEIrxVOyLxOINj6pxsnyvRY6dijeBlZEbiD46PVN5EAOaHiqeyYR4RmLejKXE4t3urMCNu9kWO34qfgoI+SKsidsGHnhE4o2MaZBZttui50DFT4HUiGfgKfYjFu9CzRF0qxVUPJMJcpuFBSGPEYvX1FuHnPozFj8PKn4yyeIJkC7LAJ9HJm1j+lEcL90FPfRUPJN5JOwp+LlMJxbvyq0sdAw0WedLTHUah69zEJaEpRGL1zHQhOzaE9a7elGlE8MDD+myDGITH/XQ4XjpLozpR6l4JjM/ZCWmuYcRi5db/y2aeuus216hWsfHXeyDZRHriMXrVitwvuaQ9RuqVO34rJFthZ3Anli8zLLdGBnTUvFMJmH6EoR6xRCLV3g3G7c7K5jRNaV6H4yzvRsei3yOWLwBTQ++qTzInDEJqvjBPBn7OzjaORGLl1X+OYZH1VQ8k4nxT0KUXyKxeDfbrqOyvYBR50jF34ejnQRPxJAr4K0eUeHrm58z7jyp+PtYFb0REns3YvG+qTgAlaaPimcyYd4yzA0iV863VlmK4uarjDxXKv5HRAIHpMm2EIunHRvGibJ/MfZ8qfgfWS5dT3RJ8rnqr9A71EnFM5kZ7uF4KDiVWLzGHjnyG84z+pxtXryAL0R6XAZ4hFIxqhux2uSKyWCVOnd2AhEc7SQYHdNCbeYVIxOREp4Ob0kgsXiXazOhVLUy/gtvMfGuDp54KHgZYvyT4OHk+9MM1f7hblR1FOK7ulMWn3Do7zIDD4c+QSxeW/8dXK3LYsWVziLik4NXYIV0/QOfcrk4eCBpRirmTVuCM1UHkddwziInzgMf6XEZJhUn+iU6vQ7HS3dDp9dR8QDwWOTzWDjrcaPutaujN8NbEmiRka5FoauIFCe6x7Xbp9HSV8+ato1ZG3eJ05caJf2XPDRzGZ6e8xKxxtaD8HTyw6Oz1xKL1znYhovyo6xq1Jotu452TlgZNbXHmnODFmHDvO1mK+6XLiNXnEgPPTJLd2NUN0LFA0DCtEfgIBRPefsov0RsSnwddgIR0eNKmpFqVDFhY/m+8SIauqtZ1401m/hQb9NnroR5x+K3SW+Z9AW6vyG5IpJccaLeoU6crfySleMXZhPv6eRLJM5MjwhsSd4JJ5GLybHSYrcQLU50svwzaMeGqfhfdRf45C7RAa7B2Dr/bZPWoscFLkCEL7niRCXN1yBXlICtmE38AOGKjD6SIGTMfwce4slfSZxELlgVvYnYsQxq+3G6cj/YjNnEt/Y1EI/pLvZBxoJ34OscNKntVke/QORWcY9TN/eZrfAg68WXteSZJa6zvTu2Jv/J6MGXCN+5kAXOJ7b/6o5ClLXmge2YTXx9VyXqlOVmiS0WOePF5D9OWDPWXuiItFhykyssWZyIteIBILNsD/F7/T0chGJsTnoT4d5xBj+zMvI5osWJzlZ9if7hbip+InqGlPg8/12zTTa0E4iwMfE1RPsn/d//QjwjkUi4OFFB4yVwBbNPxGgfuItduTvQY6ZHrgK+EOvjX0H8tMW/6kqukZEuTrQHXMIiM3C6Btvxac4Os1V/+OH9LxlIDl4BAEiNeBqeTgSLE8mPoFvdQcVPrV/fg925O3HXTG9Q5IGH1dEvIE22FQtCHicWt6m3Djm3z4JrWHTO3dCICp/lv4NaZanZ9pE4fakZihPpqHjT75da7P/+fZS15DI+Odm1J6xWnIhz4gFApx/D4eKPcP3OBcYmpn3gLv576yS4itWmV+uhR9bNvbhce5xxSfl5/twYFW8uLsqP4lTFPkbNQ8+pP4NmKxcn4rx4AMhrOIcjxf9kxC+sS92OCzVHwHUYs5KmtCUHBwo+sGphoJ/nz2mpeEsiV5Rgb/6fMTQyaJX9FzReRn1XFWwBxq2da+yRY0/eTrM93DFE33AXzlb9G7YCIxdNtvffxa6ctyw6THqy7DNoRoeoeGvTrVbg05wdaOtvNPu+SpqvoUZRDFuC0cukVZpe7MndiTvdNWbbx6C2H6crvoCtwfj18cOjauzNfxc1Heb5RX59c5/Vl2pT8QYY1Wlx8MYHKGn+jmjcyvYClHNg/hxnxQM/DKMeKfkYufVkHpEOjaiQxZH5c5wWf4/TlftxQW76yNo3lQct3mWk4k0kuzYTWeV7p/ycXK4oQVHTFdgyrC1+dL3xAg4VfYQx3eRe79GtVuBoySewdVhd9aq8NQ9fFPzF6KrQKk0vvvj+PQxq+6l4tp9AnbIcn1x7E4098nE/V9VeiL9f+QOUqhZQrFTujDRKVQt25exAiGckpH4J8JYEQCRwwMBwDxSqFpS15KJzsI3a5pr4e9R3VdnM0zWbv9RTqHgKFU+h4ilUvI0zbFC8o52EpoejiEXOVQbFS+xd9TRF3MTZ3rXcoHhPse81miJu4iH2LTQoPtwnbhdNETcJ95GdMihe6hd/EkA9TRPnqJD6xjcZFO/u6K2J8kvcAGCM5oo7RPsnHXC77w1b/9edWyZdl88Dnz6w5kp/nccvWy5d9+GE/XgfSRCWzl7zBoBbNG2spzdl9tMbvZwCRicUDwAp4WvV0f5JSwHU0dyxlgFZ4PzUJWFpZQ+8EhjaakPC9qYY/6RHqHxW0iALSE55du7vbxj6AE+vH3/M5lLtsemX5Zl79NAtp/lkPjzwjzw6e+22JeFrxp1CPKF4AFComnG++vCyyvaCtwDEAaBju8zjUpRf4hvLpc8WGvMCRaPE36NnSInq9iJeraJ0Zpe6I1Kl6YseGlFJAQQC8AcQAMCdOjA7Y452kmaJvWuNp9j3YrhP3HmpX3zFZF6KPCnxFA5182gKqHiKDfE/sqbX2+3JTysAAAAASUVORK5CYII=";
 
 
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('background-image', `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);
 
//
// теперь создаем кнопку с этим стилем
  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>
Ответить с цитированием
  #23 (permalink)  
Старый 26.01.2021, 19:40
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Спасибо большое, voraa,

все заработало именно как мне и хотелось, многое благодаря Вам узнал про CSS, СПАСИБО БОЛЬШОЕ!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поместить кнопку созданую на JS по центру АнонимныйПарень Общие вопросы Javascript 1 27.03.2017 13:42
Как получить содержимое контейнера в переменную? snovapavel jQuery 0 27.11.2016 04:56
Как выравнить содержимое JS по центру kapralpv Общие вопросы Javascript 5 03.04.2013 15:51
Как выводить на печать содержимое нужного Div-а? sarik Общие вопросы Javascript 9 04.03.2013 14:02
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13