Javascript-форум - Как изменить ID у элемента?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как изменить ID у элемента? (https://javascript.ru/forum/misc/42036-kak-izmenit-id-u-ehlementa.html)

какого парсера, есть один единственный контейнер с кодом, и один единственный див-демонстратор, и вот для этой пары нужен скрипт исполняющий вышеописанный сценарий, с остальным справлюсь сама

Цитата:

Сообщение от Блондинка

Вы же хотели сделать что-то типа учебника, 👱🏻‍♀️

А это обязательно так делать? &gt; &lt; Вот код берётся из <code>

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>pre{background:#f5f5f5}</style>
</head>
<body>

<article class="demo">
<style>
	.radius {
		background: #f0f0f0;
		border: 1px solid #999;
		width: 420px;
		padding: 15px 25px;
		margin-bottom: 10px;
		display: block;
	}
	.radius:focus{
		outline: none;
		border-color: #99f;
	}
	#a { border-radius: 50px 0 0 50px; }
	#b { border-radius: 40px 10px; }
	#c { border-radius: 13em / 3em; }
	#d { border-radius: 13em 0.5em / 1em 0.5em; }
	#e { border-radius: 8px; }
	.span_bold { font-weight: bold; }
	#span_ital { font-style: italic; }
</style>
<button class="radius">
	<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>

<script>

	function $(selector, node) { return (node || document).querySelector(selector); }

	var idname = ["a", "b", "c", "d", "e"];
	
	var demo = $("article.demo");
	var code = document.createElement("pre");
	code.textContent = demo.innerHTML;

	(function() {
		var i = 0;
		var e = $(".radius", demo);
		var s = $("style", demo).sheet;

		(e.onclick = function() {
			var id = idname[i++ % idname.length];
			for(var k = 0, len = s.cssRules.length; k < len; k++) {
				if(s.cssRules[k].selectorText === ("#" + id)) {
					e.style.cssText = s.cssRules[k].style.cssText;
					$("*", e).textContent = s.cssRules[k].style.cssText;
					break;
				}
			}
		})();
	})();

	demo.insertBefore(code, demo.childNodes[0]);
	
</script>
</body>
</html>

UPD Ещё раз прочтите пост №88 сначала

Malleys,
при клике рамка вылазит(Google Chrome, ie), может быть добавить

.radius:focus{
        outline: none;
    }

Цитата:

Сообщение от рони

при клике рамка вылазит(Google Chrome, ie), может быть добавить

ОК

Блондинка👱🏻‍♀️, с таким подходом код придётся переписать так, что он по всем параметрам будет лучше — он будет и понятнее, и структурированнее, и самого кода будет меньше, и заодно будут решены старые проблемы, которые из-за плохой структуры старого кода было сложно решить.

Цитата:

Сообщение от Блондинка

и присвоила ид контейнеру с кодом

предположив что на странице может быть не один контейнер с кодом.

Цитата:

Сообщение от Блондинка

предположив что на странице может быть не один контейнер с кодом

однако вы говорили про глобальные переменные... и как понять, что к какому примеру относится? Так это тогда в цикле обрабатывается, вместо переменных, где указывались нужные id теперь это атрибут data-idname на примере, а кнопка, которая переключает помечается атрибутом data-run

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>pre{background:#f5f5f5}</style>
</head>
<body>

<article class="demo" data-idname="a b c d e">
<style>
	.radius {
		background: #f0f0f0;
		border: 1px solid #999;
		width: 420px;
		padding: 15px 25px;
		margin-bottom: 10px;
		display: block;
	}
	.radius:focus{
		outline: none;
		border-color: #99f;
	}
	#a { border-radius: 50px 0 0 50px; }
	#b { border-radius: 40px 10px; }
	#c { border-radius: 13em / 3em; }
	#d { border-radius: 13em 0.5em / 1em 0.5em; }
	#e { border-radius: 8px; }
	.span_bold { font-weight: bold; }
	#span_ital { font-style: italic; }
</style>
<button class="radius" data-run>
	<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>

<article class="demo" data-idname="c-1 c-2 c-3 c-4">
<style>
	.box {
		background: #f0f0f0;
		border: 1px solid #999;
		width: 400px;
		height: 100px;
		font-size: 150%;
	}
	#c-1 { background-color: deeppink; }
	#c-2 { background-color: gold; }
	#c-3 { background-color: yellowgreen }
	#c-4 { background-color: gray }
</style>
<button class="box" data-run><span></span></button>
</article>

<script>

	function $(selector, node) { return (node || document).querySelector(selector); }
	function $$(selector, node) { return Array.prototype.slice.call((node || document).querySelectorAll(selector)); }

	$$("article.demo").forEach(function(demo) {
		var idname = demo.getAttribute("data-idname").split(/\s+/);
		var code = document.createElement("pre");
		code.textContent = demo.innerHTML;

		(function() {
			var i = 0;
			var e = $("[data-run]", demo);
			var s = $("style", demo).sheet;

			(e.onclick = function() {
				var id = idname[i++ % idname.length];
				for(var k = 0, len = s.cssRules.length; k < len; k++) {
					if(s.cssRules[k].selectorText === ("#" + id)) {
						e.style.cssText = s.cssRules[k].style.cssText;
						$("*", e).textContent = s.cssRules[k].style.cssText;
						break;
					}
				}
			})();
		})();

		demo.insertBefore(code, demo.childNodes[0]);
	});
	
	
</script>
</body>
</html>

Я добавил второй пример для теста, я думаю идею вы поняли... 😉

UPD Я думаю, что data-idname скоро превратится в data-selectors, но

Цитата:

Сообщение от Блондинка

с остальным справлюсь сама

Цитата:

Сообщение от Блондинка

37
див должен стать таким, и при клике по нему (без кнопки) должен меняться по кругу, тоесть 1,2,3,4,5 и опять 1
38

39
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 40px 10px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 40px 10px;</span></div>

откуда и зачем, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius?

откуда и зачем ты какой то rgb, I если в коде названия цвета?

Цитата:

Сообщение от Malleys

46
    #c-1 { background-color: deeppink; }
47
    #c-2 { background-color: gold; }
48
    #c-3 { background-color: yellowgreen }
49
    #c-4 { background-color: gray }

Цитата:

Сообщение от Блондинка

див должен стать таким, и при клике по нему (без кнопки) должен меняться по кругу,

Я вам уже писал, что рядом примером должна быть кнопка, поскольку некоторые примеры потребуют взаимодействия с пользователем, а тут такое будет не возможно, поскольку оно переключит на другое. Вы можете возразить, но я скажу, что всё-таки способ запуска на всех примерах должен быть одним! И обычно такие примеры запускают в песочнице (отдельная страница в <iframe>, чтобы сам учебник не сломался от примера, но можно, например, завести отдельный параметр, при помощи которого можно будет указывать, нужна ли песочница, поскольку некоторые примеры (как эти) не воздействуют на окружающие элементы)

Цитата:

Сообщение от Блондинка

должен меняться по кругу

Добавьте к элементу атрибут data-run и он станет переключающей кнопкой! Я это уже писал!

Цитата:

Сообщение от Блондинка

откуда и зачем, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius?

Цитата:

Сообщение от Блондинка

откуда и зачем ты какой то rgb, I если в коде названия цвета?

Когда я сказал, что данные не нужно извлекать из DOM, то это также в частности означало, что их не нужно извлекать из стилей. (Но вы очень хотели!) Да, оно так выглядит, поскольку браузер так разобрал те стили! Т. е. это ваши стили в живом, т. е. в применённом виде!

Может всё-таки описывать данные в чистом виде? (Например, JSON) Ещё раз прочтите пост №88

Цитата:

Сообщение от Блондинка

див должен стать таким

там выделено цветом то что надо читать, а черный текст можно просто пропустить

тоесть между <span> и </span> должно быть то что в приведённом коде