Не знаю как вам еще объяснить, что выдирать что-то для создания чего-то их разметки, это бессмыслица, а не автоматизация. Пишите все как статические страницы, ну так и пишите конкретные сценарии если они необходимы и данные для них, в чем проблема?
Я таким заниматься бы не стал, а значит и советовать ничего не буду. Можно, что-то унифицировать, не id='a' и прочее, а все блоки, это class="code" которые выбираются. Но этот текст нужно еще обработать, заменив в нем все представленное как html сущности, затем из полученного создать коллекцию объектов, которыми потом и оперировать. Зачем это нужно, если проще изменять параметры одного и того же объекта имеющегося в реальности? |
Можно ли изменить 22 строчку? и добавить в неё этот стиль background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;
и убрать кнопку чтобы сам див был кнопкой для клика Цитата:
|
Он уже определен и определены его стили через имя класса radius. Удалить кнопку.
document.querySelector('button') заменить на document.querySelector('.radius'). document.querySelector('#a') заменить на this. |
<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, все что необходимо выполнить содержится в них, тогда это единственный для всех страниц код обработчика. |
Цитата:
this.style.borderRadius = 'background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px;' + radius[step];тоесть уйти от внутренних стилей в head, и использовать встроенной стиль типа <div style=""> где часть стилей статична, а радиус меняется при клике. |
Цитата:
|
А строчку
Цитата:
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';'; </html> |
Блондинка,
вы же чего хотели - писать нечто, из которого скрипт должен выдирать по щелчку и выполнять, так? Вот это я и написал в посте 74, на здоровье. И если это желание обосновано тем, что вы не знаете какой сценарий в каждом конкретном случае придется писать, то один единственный скрипт для осуществления вашего желания должен опираться на один и тот же селектор для выбора ваших описаний. Для это и выбран класс exsample, не нравится, замените на иной, это не важно. |
Хоть раз пришли к общему мнению, "неважно какое название" главное что делает скрипт
|
Цитата:
|
Часовой пояс GMT +3, время: 14:11. |