Форум

laimas · #71 (**permalink**) 19.03.2019, 17:15

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

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

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

Блондинка · #72 (**permalink**) 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

<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 · #73 (**permalink**) 19.03.2019, 19:12

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

laimas · #74 (**permalink**) 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, все что необходимо выполнить содержится в них, тогда это единственный для всех страниц код обработчика.

Блондинка · #75 (**permalink**) 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=""> где часть стилей статична, а радиус меняется при клике.

Блондинка · #76 (**permalink**) 20.03.2019, 11:19

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

При условии, что все демонстрации имеют один и то же класс - example,

ну а что мешает изменять имя этого класса на каждой странице взависимости от контента?

Блондинка · #77 (**permalink**) 20.03.2019, 11:54

А строчку

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

document.querySelector('#a1').textContent = 'border-radius: ' + radius[step];
</html>

всё таки лучше было записать так

document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';';
</html>

laimas · #78 (**permalink**) 20.03.2019, 13:47

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

Блондинка · #79 (**permalink**) 20.03.2019, 14:07

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

laimas · #80 (**permalink**) 20.03.2019, 14:12

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

Хоть раз пришли к общему мнению

Выполнение таким образом никогда не будет моим мнением, но если для вас это единственное из возможного, на здоровье.

Форум

Справочник

Discord чат

Курсы javascript