19.03.2019, 17:15
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Не знаю как вам еще объяснить, что выдирать что-то для создания чего-то их разметки, это бессмыслица, а не автоматизация. Пишите все как статические страницы, ну так и пишите конкретные сценарии если они необходимы и данные для них, в чем проблема?
Я таким заниматься бы не стал, а значит и советовать ничего не буду.
Можно, что-то унифицировать, не id='a' и прочее, а все блоки, это class="code" которые выбираются. Но этот текст нужно еще обработать, заменив в нем все представленное как html сущности, затем из полученного создать коллекцию объектов, которыми потом и оперировать. Зачем это нужно, если проще изменять параметры одного и того же объекта имеющегося в реальности?
Последний раз редактировалось laimas, 19.03.2019 в 17:20.
|
|
19.03.2019, 18:43
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Можно ли изменить 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>
|
Последний раз редактировалось Блондинка, 19.03.2019 в 19:01.
|
|
19.03.2019, 19:12
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Он уже определен и определены его стили через имя класса radius. Удалить кнопку.
document.querySelector('button') заменить на document.querySelector('.radius').
document.querySelector('#a') заменить на this.
|
|
19.03.2019, 19:22
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre>
<div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;"><span>border-radius: 50px 0 0 50px;</span></div>
<div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 40px 10px;"><span>border-radius: 40px 10px;</span></div>
<div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 13em/3em;"><span>border-radius: 13em/3em;</span></div>
<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;"><span>border-radius: 13em 0.5em/1em 0.5em;</span></div>
<div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 8px;"><span>border-radius: 8px;</span></div>
</pre>
<div id="run"></div>
<script>
var f = document.createElement("template"), r = document.querySelector('#run');
f.innerHTML = document.querySelector('pre').textContent.replace(/</g, '<').replace(/>/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, все что необходимо выполнить содержится в них, тогда это единственный для всех страниц код обработчика.
Последний раз редактировалось laimas, 19.03.2019 в 19:26.
|
|
20.03.2019, 11:13
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Сообщение от 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
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Сообщение от laimas
|
При условии, что все демонстрации имеют один и то же класс - example,
|
ну а что мешает изменять имя этого класса на каждой странице взависимости от контента?
|
|
20.03.2019, 11:54
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
А строчку
Сообщение от laimas
|
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step];
</html>
|
всё таки лучше было записать так document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';';
</html>
|
|
20.03.2019, 13:47
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Блондинка,
вы же чего хотели - писать нечто, из которого скрипт должен выдирать по щелчку и выполнять, так? Вот это я и написал в посте 74, на здоровье. И если это желание обосновано тем, что вы не знаете какой сценарий в каждом конкретном случае придется писать, то один единственный скрипт для осуществления вашего желания должен опираться на один и тот же селектор для выбора ваших описаний. Для это и выбран класс exsample, не нравится, замените на иной, это не важно.
|
|
20.03.2019, 14:07
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Хоть раз пришли к общему мнению, "неважно какое название" главное что делает скрипт
|
|
20.03.2019, 14:12
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от Блондинка
|
Хоть раз пришли к общему мнению
|
Выполнение таким образом никогда не будет моим мнением, но если для вас это единственное из возможного, на здоровье.
|
|
|
|