Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.05.2017, 17:23
Новичок на форуме
Отправить личное сообщение для rfhnjirf Посмотреть профиль Найти все сообщения от rfhnjirf
 
Регистрация: 09.05.2017
Сообщений: 8

в зависимости от выбора настроить внешний вид страницы
Слева на странице должен быть расположен блок с элементами управления, позволяющими настроить внешний вид страницы. В верхнем углу блока находится крестик, по нажатию на который блок настройки скрывается со страницы, при этом на месте блока не должно оставаться пустого места.
На блоке управления также должна быть кнопка «Изменить содержимое», по нажатию на которую посередине появляется еще один блок с текстовым полем. После заполнения этого поля меняется основной текст,
Пожалуйста помогите это реализовать :
как сделать кегль заголовка,текста?
как сделать выравнивание для текста,чтобы оно работала при каждом нажатии ?
как скрыть основной блок по нажатию на крестик?
как заменить содержание текста страницы?
Есть html и неполный js код
Изображения:
Тип файла: jpg вариант04.jpg (456.7 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 20.05.2017, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

настройка вида страницы
rfhnjirf,
Освойте основы языка и вопрос отпадет сам, полностью или частично.
На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rem{
    color: hsla(0, 100%, 50%, 1);
    cursor: pointer;
    position: absolute;
    right: 20px;
  }
  .content{
    position: relative;
    background-color: hsla(120, 61%, 34%, 1);
    width: 450px;
    border-radius: 24px;
    padding: 8px;

  }

  </style>
  <script>
window.addEventListener("DOMContentLoaded", function() {
    function useStyle(elems, property) {
        return function() {
            var value = this.value || this.dataset.value;
            [].forEach.call(elems, function(el) {
                el.style[property] = value
            })
        }
    }
   var sel = document.querySelector(".selH");
   sel.addEventListener("change", useStyle(document.querySelectorAll("h2"), "fontSize"));

   sel = document.querySelector(".selP");
   sel.addEventListener("change", useStyle(document.querySelectorAll("p.par"), "fontSize"));

   [].forEach.call(document.querySelectorAll('[name="Align"]'), function(item) {
      item.addEventListener("change", useStyle(document.querySelectorAll("p.par"), "textAlign"));
   });

   sel = document.querySelector(".rem");
   sel.addEventListener("click", useStyle(document.querySelectorAll(".content"), "display"));

});
  </script>
</head>

<body>
<div class="content">
<span class="rem" data-value="none">X</span><br>

<label>Кегль заголовка:
<select class="selH">
<option value="18pt">18пт</option>
<option value="16pt">16пт</option>
<option value="14pt">14пт</option>
</select></label><br>
<span>Текст</span><br>
<span>Выравнивание:</span><br>
<label for="">справа<input type="radio" name="Align" value="right"></label>
<label for="">по центру<input type="radio" name="Align" value="center"></label>
<label for="">по ширине<input type="radio" name="Align" value="justify"></label>
<label for="">слева<input type="radio" name="Align" value="left"></label><br>


<label>Кегль шрифта:
<select class="selP">
<option value="18pt">18пт</option>
<option value="16pt">16пт</option>
<option value="14pt">14пт</option>
</select></label>
</div>
<h2 class="title">Экология и климат Тюмени</h2>

<p  class="par">
Климат в Тюмени загадочен и не предсказуем. Благодаря своему положению, Тюмень подвержена влиянию ветров, что идут с севера через  равнину и с юга из жарких казахских степей. Когда-то, во времена бабушек, в Тюмени были суровые зимы с низкими температурами и большим количеством снега.
</p>
<p   class="par">
Сейчас всё не так. Снежная зима – это редкость, а сама зима тёплая и температура ниже тридцати – скорее исключение, воспринимаемое как великий и, к сожалению, редкий праздник у детей школьного возраста. Обычно, такие детские праздники случаются в первом месяце года.
</p>
<p  class="par">
Времена года здесь состоят из затяжных вёсен, короткого лета, осени и трёх-четырёх месячной зимы. Лето хоть и коротко, но в эти дни солнце особо старается выдать все причитающееся городу лучи тепла. Одежда на низкие плюсовые температуры висит у жителей города всю позднюю весну, лето и раннюю осень, и является наиболее часто носимой. А ситуация, когда утром выходишь в тёплой весенней куртке, в обед её оставляешь на работе и идёшь погулять под приятным солнцем в рубашке, вечером возвращаешься домой опять в куртке под дождём, а поздно вечером отправляешься гулять с собакой уже в куртке на минусовую температуру под снег, никого не удивляет, хоть и является не приятным осенним или весенним сюрпризом для большинства горожан.
</p>
<p   class="par">
Город сейчас в стадии экономического и территориального роста. Вследствие чего экологическое состояние ежегодно ухудшается. Будучи и ранее неудовлетворительной, экологическая ситуация становиться всё более критичной. Чем ближе к центру города, тем более сильно влияние выбросов транспорта. Зелёные насаждения в городе справиться не могут. Из-за количества транспорта, дороги расширяются за счёт прилегающим к ним территориям засаженным газонами и деревьями. Особенно сильно воздействие ТЭЦ, которые из-за роста города вынуждены работать всё более интенсивно.
</p>
<p  class="par">
Кроме ТЭЦ есть ещё немало предприятий оказывающих негативное влияние на окружающую среду и здоровье граждан города. И их число продолжает увеличиваться. И ещё одним фактором приближающий переход Тюмени в список городов с вредной для проживания экологией – посёлки, всё сильнее разрастающиеся вокруг города и оттесняющие леса от его границ.
</p>
</body>
</html>

Последний раз редактировалось рони, 20.05.2017 в 20:11.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
html код в зависимости от выбора radio Findail Общие вопросы Javascript 6 30.03.2013 12:53
Внешний вид зависимых селектов lesh1j jQuery 1 01.10.2012 15:12
Внешний вид страницы в зависимости от переменной Sadist_dead Элементы интерфейса 1 22.08.2011 15:45
Открытие окна в зависимости от выбора в <option> partyzan Общие вопросы Javascript 0 10.04.2008 01:00