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)

Цитата:

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

выбран класс exsample, не нравится, замените на иной, это не важно.

Вот и я говорю что не важно, в этом вопросе наши мнения совпадают

Народ, у кого есть немного времени и кто поможет разобраться с этой страницой?

правда я не до конца разобралась как правильно сформулировать вопрос, но попробую

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #f0f0f0; border: 1px solid #999; width: 720px; padding: 15px; margin-bottom: 10px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
#a { border-radius: 50px 0 0 50px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
</style>
</head>
<body>
<pre><code>
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;meta charset=&quot;utf-8&quot;&gt;<br>
&lt;title&gt;border-radius&lt;/title&gt;<br>
&lt;style&gt;<br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
&lt;/style&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;div class=&quot;radius&quot;&gt;&lt;/div&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;
<code/></pre><br>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.

<script>
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'], step = 0;
document.querySelector('.radius').addEventListener('click', function() {
    step = ++step % 5;
this.style.borderRadius = radius[step];
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';';
})
</script>
</body>
</html>

нужен массив не готовых значений, а массив названий ид'ов, что-то наподобие

var idname = ['a', 'b', 'c', 'd', 'e']

вместо var radius
дальше нужна переменная например

var classname

значения эти надо скопировать из контейнера <code>,
а дальше значения эти надо сложить вместе, но чтобы при клике на див значения стилей переменной класса было постоянным, а значения стиля для ид'а менялось по кругу при клике на див.
очень надеюсь что поймут что я пытаюсь сказать

ясно, я просто не могу правильно сформулировать

Цитата:

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

ясно, я просто не могу правильно сформулировать

Я понял, вас. Я не знаю, почему вам именно так надо.

Посмотрите такой вариант с вашими значениями длин радиусов углов...

<style>
input, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	font: inherit;
	box-sizing: content-box;
	min-width: 1em;
}
input:focus, select:focus {
	border: 1px solid silver;
	background: white;
}
body {
	text-align: center;
}
#code {
	font: 144% monospace;
	padding: 1em;
	margin: 2em 0;
	text-align: left;
	display: inline-block;
	background: blanchedalmond;
}
#code label {
	display: block;
	color: slategray;
}
#code label:after {
	content: ";";
}
#test {
	margin: auto;
	background: red;
	background: #f0f0f0;
	border: 1px solid #999;
}
</style>

<div id="test"></div>

<section id="code">
	<label>
		border-radius:
		<select id="border-radius" value="10% / 30px">
			<option>50px 0 0 50px</option>
			<option>40px 10px</option>
			<option>13em / 3em</option>
			<option>13em 0.5em / 1em 0.5em</option>
			<option>8px</option>
		</select></label>
	<label>
		width:
		<input id="width" value="420px"></label>
	<label>
		height:
		<input id="height" value="100px"></label>
</section>

<p><strong>Совет:</strong> Нажмите на значение CSS, чтобы изменить его.</p>

<script>
	Array.prototype.forEach.call(document.querySelectorAll("input, select"), function(element) {
		(element.oninput = element.onchange = function() {
			element.style.width = element.value.length + "ch";
			document.getElementById("test").style[element.id] = element.value;
		})();
	});
</script>

Malleys, сорри, не то, это как бы будет типа учебника по html и css, контейнер с кодом даёт пример кода, а див визуально показывает что обозначает этот код,
скрипт выше почти полностью отвечает нужным требованиям, но не учитывает пару моментов,

насколько я понимаю, надо создать четыре переменных, первая будет хранить стиль класса див'а, вторая стиль ид'а див'а, третья стиль класса спан'а, четвертая стиль ид'а спан'а, также надо создать массив с именами ид'ов див'а, и все эти значения надо скопировать с контейнера с кодом, а потом просто сложить стиль класса и ид'а див'а и подставить в див, также со спаном(если конечно такие имеются), а потом просто при клике менять значения радиуса исходя из того что скопировано из контейнера с кодом, вот сценарий который должен выполнять скрипт, стили в head не имеют никакого отношения к див'у-демонстратору, надеюсь что рано или поздно я смогу на словах объяснить хоть что нибудь.

Вот я для образца добавила стили спану, и присвоила ид контейнеру с кодом, ниже </html> буквально на пальцах поясняется что должно получиться

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #a6ffff; border: 1px solid #3232cc; width: 90%; padding: 10px 35px; margin-bottom: 1em; }
</style>
</head>
<body>
<pre><code id="code-1">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;meta charset=&quot;utf-8&quot;&gt;<br>
&lt;title&gt;border-radius&lt;/title&gt;<br>
&lt;style&gt;<br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
.span_bold { font-weight: bold; }<br>
#span_ital { font-style: italic; }<br>
&lt;/style&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;div class=&quot;radius&quot;&gt;&lt;/div&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;
<code/></pre><br>
<div style="сюда надо вставить значения стилей класса плюс ид'а из контейнера с кодом"><span style="сюда надо вставить значения стилей класса плюс ид'а из контейнера с кодом">сюда надо вставлять значения стиля которые меняются при клике на див</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
</body>
</html>
див должен стать таким, и при клике по нему (без кнопки) должен меняться по кругу, тоесть 1,2,3,4,5 и опять 1
 
<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>
<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>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 13em/3em;"><span style=" font-weight: bold; font-style: italic;">border-radius: 13em/3em;</span></div>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 13em 0.5em/1em 0.5em;"><span style=" font-weight: bold; font-style: italic;">border-radius: 13em 0.5em/1em 0.5em;</span></div>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 8px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 8px;</span></div>

Блин, неужели опять непонятно сформулировала? или форум вымер, люди ау, есть хоть кто нибудь ?

Почему бы исходные данные не хранить в объекте, который легко прочитать, и уже из него данные вставлять в <code> и в пример?

Цитата:

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

Malleys, сорри, не то, это как бы будет типа учебника по html и css, контейнер с кодом даёт пример кода, а див визуально показывает что обозначает этот код,

Как не то? Именно это оно и показывает! Я думал, вы поняли идею!

Цитата:

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

это... будет... учебник по html и css

Ну в таком виде он вряд ли будет, если вы будете каждые свойство, дескриптор, @-правило, селектор, функции таким образом описывать, то вы очень скоро потеряете контроль над вашим проектом, допустим даже потом, когда всё будет готово по вашему методу, даже добавить ещё какой-то пример выльется в массовое редактирование файлов.

Да, такое приложение возможно сделать только на HTML, CSS, JS, но только у вас всё должно происходить на одной странице. И вы должны начать хотя бы с описания данных к каждому свойству, например в формате JSON, что бы не было проблем с извлечением данных!

Я предлагаю вам такое Чистые данные → Интерфейс, вы почему-то опять выбираете самое сложное и многословное Интерфейс → данные → Интерфейс

Цитата:

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

Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a1"><span id="b1">text two</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.

Такой метод не очень для учебника, неторое свойства имеют много значении, и чтобы что-то сравнить, придётся прощёлкивать весь список.

Цитата:

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

text-align описывается это свойство и надо показать что будет если изменить значение с left на right и только, ну это разумеется пример,

Вы хотите сделать программу, в которой можно смотреть, какие бывают у CSS своиств значения, и как они воздействуют на элемент? 🆒🤓 😎💡 👍

Цитата:

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

обсуждение по ротации id среди элементов

юморист

Цитата:

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

первый как присвоить стиль диву и заполнить <span>, а потом при клике менять

В контексте того, что вы делаете учебник, то я думаю, что скорей нужен живой ввод с подсказками!

Цитата:

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

как преобразовать нормальный код в мнемонику "кавычки"

Используйте textContent для вставки текста пример на страницу. Можно ещё так "<p>Пример абзаца</p>".replace(/<>&"'/g, "<>&"); если вы хотите вставить пример через innerHTML. Вопрос: Какой вариант вы выберерете?

Цитата:

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

решить вопрос с подсветкой кода

prism.js

Цитата:

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

и присвоить стиль ид'а "а" а спан заполнить свойством ид'а "а", как показано в 36 строчке, (36 строчки конечно небудет) и при клике на див поменять свойства дива и текст спана взятые у ид "b" и так по кругу, зачем кнопки если сам див может играть роль кнопки.

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

Цитата:

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

скрипт должен найти в контейнере <code>

Может стоит начать с чистых данных, тогда не придётся ничего искать!

Цитата:

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

просто речь идет не про одну страницу, а про много страниц

Так делайте всё на одной странице.

Цитата:

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

пишите код каждой страницы от руки

то пишите, то не пишите, а если я не разбираюсь ещё так хорошо, то откуда мне знать, что потом делать с таким кодом. Про пост №74, так это все примеры придётся руками так набирать, или как?

Да, я буду вручную описывать все свойства, разумеется что я буду брать и копипастить уже готовые статьи, но корректировать, более детально описывая те моменты на которых я спотыкалась, что я поняла не с первого прочтения,
я выбираю такой путь потому что уверена, в случае чего я смогу со своими знаниями яваскрипт равными 10^-100, подправить скрипт под нужный сценарий, и сейчас предусмотрены практически все ньюансы

одним словом надо именно такой скрипт, и неважно год или два пройдёт до завершения писанины учебника.

Цитата:

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

сейчас предусмотрены практически все ньюансы

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