Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #71 (permalink)  
Старый 19.03.2019, 17:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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

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

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

Последний раз редактировалось laimas, 19.03.2019 в 17:20.
Ответить с цитированием
  #72 (permalink)  
Старый 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.
Ответить с цитированием
  #73 (permalink)  
Старый 19.03.2019, 19:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Он уже определен и определены его стили через имя класса radius. Удалить кнопку.
document.querySelector('button') заменить на document.querySelector('.radius').
document.querySelector('#a') заменить на this.
Ответить с цитированием
  #74 (permalink)  
Старый 19.03.2019, 19:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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

Последний раз редактировалось laimas, 19.03.2019 в 19:26.
Ответить с цитированием
  #75 (permalink)  
Старый 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=""> где часть стилей статична, а радиус меняется при клике.
Ответить с цитированием
  #76 (permalink)  
Старый 20.03.2019, 11:19
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Сообщение от laimas
При условии, что все демонстрации имеют один и то же класс - example,
ну а что мешает изменять имя этого класса на каждой странице взависимости от контента?
Ответить с цитированием
  #77 (permalink)  
Старый 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>
Ответить с цитированием
  #78 (permalink)  
Старый 20.03.2019, 13:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Блондинка,
вы же чего хотели - писать нечто, из которого скрипт должен выдирать по щелчку и выполнять, так? Вот это я и написал в посте 74, на здоровье. И если это желание обосновано тем, что вы не знаете какой сценарий в каждом конкретном случае придется писать, то один единственный скрипт для осуществления вашего желания должен опираться на один и тот же селектор для выбора ваших описаний. Для это и выбран класс exsample, не нравится, замените на иной, это не важно.
Ответить с цитированием
  #79 (permalink)  
Старый 20.03.2019, 14:07
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Хоть раз пришли к общему мнению, "неважно какое название" главное что делает скрипт
Ответить с цитированием
  #80 (permalink)  
Старый 20.03.2019, 14:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запомнить потомка, пототомов у родительского элемента? 1975andrei Общие вопросы Javascript 5 25.01.2013 16:57
Как узнать имя элемента syegorius Events/DOM/Window 3 12.10.2011 18:07
как изменить css свойсво нескольких елементов? IIIgun Общие вопросы Javascript 17 12.08.2011 12:20
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 13:08