Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как изменить ID у элемента? (https://javascript.ru/forum/misc/42036-kak-izmenit-id-u-ehlementa.html)

рони 12.03.2019 22:01
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
#a {
    width: 255px;
    height: 125px;
    background: #cfe6cf;
    border-radius: 15px/12px;
    border: 1px solid #c0c0c0;
    position: absolute;
}

#b {
    width: 25px;
    height: 100px;
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 122.5px;
    -webkit-transform-origin: 50% 0 ;
       -moz-transform-origin: 50% 0;
         -o-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
}
#a.anim  #b {
    -webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
       -moz-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
         -o-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
        -ms-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
            animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}

#c {
    width: 1px;
    height: 75px;
    background: #999;
    position: absolute;
    left: 12px;
}
#d {
    width: 1px;
    height: 1px;
    background: transparent;
    border-top: 15px solid #000080;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    left: 120px;
}
#U_2e {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    background:    -moz-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background: -webkit-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background:      -o-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background:     -ms-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background:         radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    position: absolute;
    top: 75px;
}
@-webkit-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@-moz-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@-o-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@-ms-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
</style>
</head>
<body>
<div id="a" class="anim">
<span id="d"></span>
<span id="b">
<span id="c"></span>
<span id="U_2e"></span>
</span>
</div>
<script>
var a = document.querySelector("#a");
a.addEventListener("click", function() {
    a.classList.remove("anim");
    document.documentElement.clientWidth;
    a.classList.add("anim");
});
</script>

</body>
</html>

Блондинка 12.03.2019 22:08
То самое, что я не могла найти, всё супер.

Malleys 14.03.2019 03:32
Цитата:
Сообщение от Блондинка (Сообщение 504711)
То самое, что я не могла найти, всё супер.
Если вы хотели добавить префиксы, то вам ещё нужно добавить -webkit-border-radius и -moz-border-radius.

Однако свойств -ms-animation, правила @-ms-keyframes и функции -ms-radial-gradient никогда в никаком браузере не существовало!

Также свойства -moz-transform, -ms-transform и -o-transform бессмысленны внутри правила @-webkit-keyframes.

Также свойства -webkit-transform, -ms-transform и -o-transform бессмысленны внутри правила @-moz-keyframes.

Также свойства -webkit-transform, -ms-transform и -moz-transform бессмысленны внутри правила @-o-keyframes.

У вас также допущена ошибка в синтаксисе функции radial-gradient

Для последних 40 версии браузеров (однако IE9+) код может выглядеть так...

#a {
	width: 255px;
	height: 125px;
	background: #cfe6cf;
	-webkit-border-radius: 15px / 12px;
	        border-radius: 15px / 12px;
	border: 1px solid #c0c0c0;
	position: absolute;
}
 
#b {
	width: 25px;
	height: 100px;
	display: inline-block;
	position: absolute;
	top: 15px;
	left: 122.5px;
	-webkit-transform-origin: 50% 0;
	    -ms-transform-origin: 50% 0;
	        transform-origin: 50% 0;
}

#a.anim  #b {
	-webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
	        animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}
 
#c {
	width: 1px;
	height: 75px;
	background: #999;
	position: absolute;
	left: 12px;
}
#d {
    width: 1px;
    height: 1px;
    background: transparent;
    border-top: 15px solid transparent;
    border-top-color: #000080;
    position: absolute;
    left: 120px;
}
#U_2e {
	width: 25px;
	height: 25px;
	display: inline-block;
	-webkit-border-radius: 50%;
	        border-radius: 50%;
	background: -webkit-radial-gradient(60% 40%, circle, #99f, #00f);
	background: -o-radial-gradient(60% 40%, circle, #99f, #00f);
	background: radial-gradient(circle at 60% 40%, #99f, #00f);
	position: absolute;
	top: 75px;
}

@-webkit-keyframes pendulum-1 {
	from {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}

	to {
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
}

@keyframes pendulum-1 {
	from {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}

	to {
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
}

Блондинка 14.03.2019 09:26
Цитата:
Сообщение от Malleys
Указывайте, что вы делали, что именно у вас не получается, и пусть это будет в одной теме!
Перенесла в одну тему

рони 14.03.2019 09:59
Блондинка,
можно run добавить так?
[html run]
... минимальный код страницы с вашей проблемой
[/html]

Блондинка 18.03.2019 13:28
laimas,
а как присвоить диву id class и стиль, а спану id и заполнить, спан текстом взятыми из контейнера <code>, и чтобы при клике на див менялись id a, b, c, d, e, a и так по кругу ?

<!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="" class=""><span id=""></span></div><br>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
</body>
</html>


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

laimas 18.03.2019 18:13
На том сайте представлены все "варианты", видны все элементы, менять имена атрибутов не нужно. Хотите также - делайте видимым каждый последующий. Хотите на одном показать изменения, изменяйте значение параметра правила стиля.

Блондинка 18.03.2019 18:36
Значит осталось найти ответы на три вопроса, первый как присвоить стиль диву и заполнить спан а потом при клике менять, второй это как преобразовать нормальный код в мнемонику "кавычки", и третий решить вопрос с подсветкой кода.

laimas 18.03.2019 18:43
Я не представляю какой демонстратор вы хотите иметь, но если имеется набор значений одного правила стиля, которые нужно показать на одном элементе, то технически это можно представить в виде списка или группы кнопок, в котором выбранное значение применяется к одному элементу без всяких изменений его класса, а тем более идентификатора.

Блондинка 18.03.2019 19:30
ну надо 35 строчку в коде выше заменить на 
<div style=""><span></span></div><br>
и присвоить стиль ид'а "а" а спан заполнить свойством ид'а "а", как показано в 36 строчке, (36 строчки конечно небудет) и при клике на див поменять свойства дива и текст спана взятые у ид "b" и так по кругу, зачем кнопки если сам див может играть роль кнопки.

laimas 18.03.2019 19:53
Цитата:
Сообщение от Блондинка
ну надо 35 строчку в коде выше заменить на
Зачем? Можно конечно и менять, но к примеру, вы едете на своем автомобиле со скоростью 40 км/час, если вы вам хочется ехать быстрее нужно ли для этого пересаживаться в другой автомобиль или же можно просто больше вдавить педаль газа на автомобиле на котором вы едете?

Блондинка 19.03.2019 06:06
laimas,
одним словом надо диву из 35 строчки придать свойства из строк 22(background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px;) и 23(border-radius: 50px 0 0 50px;) и свойства из строки 23 потом менять при клике, а также менять текст спана взятыми из строк 24, 25, 26, и 27.

laimas 19.03.2019 06:25
Я повторяю, я не представляю что за демонстратор вы хотите создать. Например, в моем понимании, это показать как величина значения будет влиять на конечный результат. Ну так значит нужно показать все возможное, а щелкая кнопкой показать все возможное, это не слишком удобно. Значит должно быть что-то типа:

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
table {
    width: 100%;
}
td {
    width: 20%;
    padding: 10px;
}
pre {
    padding: 30px 0 30px 40%;
    border: 1px solid #777;
}

</style>
<script type="text/javascript">
$(function() {
    $('input').on('input', function() {
        var dms = $(':checked').val();
        
        $(this).next().val(this.value);
        
        var opt = $.map($('output'), function(e) {
            return e.value + dms
        }).join(' ');
        
        $('pre').css('border-radius', opt).text(function() {
            //только для примера, ибо квантификатор (?<=x)y не все браузеры поддерживают
            return this.textContent.replace(/(?<=border-radius:\s)[^;]+/, opt) 
        })
    });
});
</script>
</head>
<body>
<table>
<tr><td>Style/Value</td><td>top</td><td>right</td><td>bottom</td><td>left</td></tr>
<tr>
    <td>border-radius <label><input type="radio" name="a" value="px" checked="" /> px</label> <label><input name="a" type="radio" value="%" /> %</label></td>
    <td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
    <td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
    <td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
    <td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
</tr>
<tr><td colspan="5"><pre>pre { 
    padding: 30px 0 30px 40%;
    border: 1px solid #777;
    border-radius: 0 0 0 0; 
}</pre></td></tr>
</table>
</body>
</html>


Здесь можно и устанавливать значения для каждого угла, и выбирать единицы, и при этом влияние будет значительным. Можно сделать выбор единиц для каждого угла индивидуально, что так же будет иметь иной результат конечный. Кроме процентов и пикселей можно и другие единицы добавить. А вот что вы хотите и для чего, увы, я не знаю.

Блондинка 19.03.2019 08:18
laimas,
Есть страница с контейнером <code></code> в котором содержится некий код(в этом случае с 5 значениями свойства border-radius), после этого контейнера надо показать что написано в в этом коде на примере, если делать вручную, то это выглядит так 
<div id="a" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
<div id="b" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 40px 10px;"><span id="b1">border-radius: 40px 10px;</span></div>
<div id="c" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 13em/3em;"><span id="c1">border-radius: 13em/3em;</span></div>
<div id="d" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius:  13em 0.5em/1em 0.5em;"><span id="d1">border-radius: 13em 0.5em/1em 0.5em;</span></div>
<div id="e" class="radius" styly="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 8px;"><span id="e1">border-radius: 8px;</span></div>

Блондинка 19.03.2019 08:40
но чтобы избавиться от кучи ручной работы, которую можно возложить на скрипт, плюс надо это уместить в один див, при клике на который указанные значения меняются поочерёдно по кругу.

Блондинка 19.03.2019 09:06
другими словами скрипт должен найти в контейнере <code> найти скопировать и вставить

1. стиль класса
2. стиль ид'а
3. при клике менять стиль ид'а

Блондинка 19.03.2019 13:09
Никто не знает решения?

laimas 19.03.2019 13:29
Цитата:
Сообщение от Блондинка
скрипт должен найти в контейнере <code> найти скопировать и вставить
А почему бы не демонстрировать на одном? Контейнер code описывает примеры, собственно он у вас содержит не код, а текст. Разве не проще одному и тому же элементу на странице менять параметры единственного правила стиля, которым отличаются те, что описаны в контейнере? Занесите все эти значения в массив, выбирайте их оттуда и определяйте для div демонстратора. А как это, щелчком по кнопке или иным путем уже не важно. Поэтому не так, а именно выдирать из текста?

Блондинка 19.03.2019 13:57
В контейнере <code> пример кода, а див-демонстратор просто визуально показывает что обозначает этот код.

laimas 19.03.2019 14:02
Ну так и меняйте параметры правила border-radius div демонстратору, выбирая их из массива:

var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px']

Блондинка 19.03.2019 14:13
А как создать массив, скопировав из контейнера?

laimas 19.03.2019 14:34
Просто объявляем массив необходимых значений, зачем вам их копировать из контейнера, он что динамически будет изменяться или что?

<html>
<head>
<meta charset="utf-8">
<style>
.radius {
    background: #f0f0f0; 
    border: 1px solid #999; 
    width: 420px; 
    padding: 15px; 
    margin-bottom: 10px; 
    border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
<button>Next</button>
<script>
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'], step = 0;
document.querySelector('button').addEventListener('click', function() {
    step = ++step % 5;
    document.querySelector('#a').style.borderRadius = radius[step];
    document.querySelector('#a1').textContent = 'border-radius: ' + radius[step];
})
</script>
</body>
</html>

Блондинка 19.03.2019 14:57
laimas,
просто речь идет не про одну страницу, а про много страниц, и на каждой свой контейнер с кодом, и свой див-демонстратор.
можно див обернуть в button?

Блондинка 19.03.2019 15:06
вот приблизительный список страниц

laimas 19.03.2019 15:08
Цитата:
Сообщение от Блондинка
просто речь идет не про одну страницу, а про много страниц
Ну так готовьте код на основе таких данных, и которые отдавайте клиенту, а не выдирайте их из текста, это и накладно, и не разумно. Когда либо приходилось сталкиваться с шаблонизаторами? Вот так и у вас должно работать. Например, в базе описаны данные для N страниц - скажем так "Название урока", "Тема урока" и данные для него. В данном случае пять записей со значениями - '50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'.

Запрашивает пользователь этот урок, подключается шаблон этого урока, в который передаются данные из базы для него, где параметры радиуса, это массив. Шаблонизатор помещает эти данные в определенном месте шаблона, а содержание контейнера code выводит в цикле - повторяя ваш div и span, в которые подставляет значения радиусов.

Этот же шаблон имеет и CSS необходимый, и JS код обслуживающий данный урок, в котором var radius данные выводятся как json.

Так это делается, если вы хотите автоматизма.

Блондинка 19.03.2019 15:33
А нельзя автоматизировать только див-демонстратор, чтобы скрипт просто копировать из контейнера и вставлялась в див?

laimas 19.03.2019 15:47
Цитата:
Сообщение от Блондинка
чтобы скрипт просто копировать из контейнера и вставлялась в див?
Зачем и что он должен копировать? Если не хотите хоть в чем то автоматизировать процесс создания своих страниц, значит пишите код каждой страницы от руки (статические страницы), в которых размещайте сразу и JS код необходимый, и необходимые для него данные.

Блондинка 19.03.2019 15:56
laimas,
наверное не правильно сформулировала вопрос,
можно ли сделать чтобы скрипт автоматически генерировал массив исходя из содержимого контейнера

laimas 19.03.2019 16:06
А что будут содержать ваши контейнеры и есть ли гарантия того, что контекст копирования можно однозначно определить на любой из ваших страниц, и тем более, что скопированные данные гарантированно подойдут js сценарию на любой из страниц?

Если на странице А, это будет изменение радиуса у div, а на другой это пример о градиентной заливке, то может ли один и то же скрипт найти нужное, если ему не указать конкретно что искать? А если требуется указание, то зачем нагружать сценарий ненужной работой, когда это все сразу можно задать для сценария как данные?

Трудно понимание для вас "динамические страницы", ну так пишите статические, в них все сразу и определяйте, текст поясняющий код пусть так и будет текстом, а CSS, JS, это реальное, что и будет исполняться, без всякого копирования. Ну посмотрите к примеру описание документаций каких либо API, библиотек, там ведь тоже описаны методы, которые могут содержать и html разметку, но никому в голову не придет копировать это описание для реального выполнения. Это все отдельно - реальным кодом.

Блондинка 19.03.2019 16:48
Цитата:
Сообщение от laimas
Если на странице А, это будет изменение радиуса у div, а на другой это пример о градиентной заливке, то может ли один и то же скрипт найти нужное, если ему не указать конкретно что искать?
так я вручную и буду указывать, и на каждой странице свой скрипт будет, только какую-то часть этой ручной работы хочу переложить на скрипт, а именно создание массива, тоесть прошу дать не скрипт универсальный для всех страниц, а шаблон скрипта который по максимуму сможет автоматизировать мою ручную работу

laimas 19.03.2019 17:15
Не знаю как вам еще объяснить, что выдирать что-то для создания чего-то их разметки, это бессмыслица, а не автоматизация. Пишите все как статические страницы, ну так и пишите конкретные сценарии если они необходимы и данные для них, в чем проблема?

Я таким заниматься бы не стал, а значит и советовать ничего не буду.

Можно, что-то унифицировать, не id='a' и прочее, а все блоки, это class="code" которые выбираются. Но этот текст нужно еще обработать, заменив в нем все представленное как html сущности, затем из полученного создать коллекцию объектов, которыми потом и оперировать. Зачем это нужно, если проще изменять параметры одного и того же объекта имеющегося в реальности?

Блондинка 19.03.2019 18:43
Можно ли изменить 22 строчку? и добавить в неё этот стиль background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;

и убрать кнопку чтобы сам див был кнопкой для клика

Цитата:
Сообщение от laimas (Сообщение 505002) 
<html>
<head>
<meta charset="utf-8">
<style>
.radius {
    background: #f0f0f0; 
    border: 1px solid #999; 
    width: 420px; 
    padding: 15px; 
    margin-bottom: 10px; 
    border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
<button>Next</button>
<script>
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'], step = 0;
document.querySelector('button').addEventListener('click', function() {
    step = ++step % 5;
    document.querySelector('#a').style.borderRadius = radius[step];
    document.querySelector('#a1').textContent = 'border-radius: ' + radius[step];
})
</script>
</body>
</html>

laimas 19.03.2019 19:12
Он уже определен и определены его стили через имя класса radius. Удалить кнопку.
document.querySelector('button') заменить на document.querySelector('.radius').
document.querySelector('#a') заменить на this.

laimas 19.03.2019 19:22 
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre>
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;"&gt;&lt;span&gt;border-radius: 50px 0 0 50px;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 40px 10px;"&gt;&lt;span&gt;border-radius: 40px 10px;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 13em/3em;"&gt;&lt;span&gt;border-radius: 13em/3em;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius:  13em 0.5em/1em 0.5em;"&gt;&lt;span&gt;border-radius: 13em 0.5em/1em 0.5em;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 8px;"&gt;&lt;span&gt;border-radius: 8px;&lt;/span&gt;&lt;/div&gt;
</pre>

<div id="run"></div>

<script>
var f = document.createElement("template"), r = document.querySelector('#run');
f.innerHTML = document.querySelector('pre').textContent.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
var o = f.content.querySelectorAll('.example'), i = 0, k = o.length;
r.appendChild(o[i]); 

r.addEventListener('click', function() {
   i = ++i % k;
   this.innerHTML = '';
   this.appendChild(o[i])
});
</script>
</body>
</html>


При условии, что все демонстрации имеют один и то же класс - example, все что необходимо выполнить содержится в них, тогда это единственный для всех страниц код обработчика.

Блондинка 20.03.2019 11:13
Цитата:
Сообщение от laimas
Он уже определен и определены его стили через имя класса radius.
Я хотела что то типа такой конструкции
this.style.borderRadius = 'background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px;' + radius[step];
тоесть уйти от внутренних стилей в head, и использовать встроенной стиль типа <div style=""> где часть стилей статична, а радиус меняется при клике.

Блондинка 20.03.2019 11:19
Цитата:
Сообщение от laimas
При условии, что все демонстрации имеют один и то же класс - example,
ну а что мешает изменять имя этого класса на каждой странице взависимости от контента?

Блондинка 20.03.2019 11:54
А строчку
Цитата:
Сообщение от laimas (Сообщение 505002) 
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step];
</html>
всё таки лучше было записать так 
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';';
</html>

laimas 20.03.2019 13:47
Блондинка,
вы же чего хотели - писать нечто, из которого скрипт должен выдирать по щелчку и выполнять, так? Вот это я и написал в посте 74, на здоровье. И если это желание обосновано тем, что вы не знаете какой сценарий в каждом конкретном случае придется писать, то один единственный скрипт для осуществления вашего желания должен опираться на один и тот же селектор для выбора ваших описаний. Для это и выбран класс exsample, не нравится, замените на иной, это не важно.

Блондинка 20.03.2019 14:07
Хоть раз пришли к общему мнению, "неважно какое название" главное что делает скрипт

laimas 20.03.2019 14:12
Цитата:
Сообщение от Блондинка
Хоть раз пришли к общему мнению
Выполнение таким образом никогда не будет моим мнением, но если для вас это единственное из возможного, на здоровье.


Часовой пояс GMT +3, время: 03:44.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице