Javascript.RU

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

Как для нескольких элементов с одним id присвоить style
Помогите пожалуйста, у нас есть текст и див с выбором параметром страницы,при нажатии на "выравнивание по ширине и т.п" текст должен выровняться по ширине как это сделать ?
<html>
  <head>
   <meta charset="utf-8">
   
    
	<link rel=stylesheet href="style.css">
  </head>

   <body>
   
<div id="content">

<div id="block">
<h3 style="line-height: 0;">Настройка страницы</h3><input type='button' id='X' name="X" value="X">
<b style="font-size:10pt;text-align:left;line-height: 0;">Заголовок</b>
<p style="font-size:12pt;text-align:left;line-height:2.5;" >Выравнивание:
 <br><span style="font-size:10pt;text-align:left;line-height:0;"><span id="right">справа</span>,<span id="center"> по центру</span>, <span id="left">слева</span>.</span></p>
<div id="kzagolovok">
 <p style="font-size:12pt;text-align:left;"> Кегль заголовка: <br>
</p> <select name="kz">
<option>18пт</option>
<option>16пт</option>
<option>14пт</option>

</select>
</div>
<p style="font-size:12pt;text-align:left;">Цвет шрифта:
<table id="color">
<tr><td id="green"><td id="blue"><td id="red">
</table> </p>
<b style="font-size:12pt;text-align:left;">Текст </b>
<p style="font-size:12pt;text-align:left;">Выравнивание:<br><span style="font-size:10pt;text-align:left;">
<span id="right2">справа,</span><span id="center2">по центру,</span> <span id="justify">по ширине</span> ,слева.</span></p>
<p style="font-size:12pt;text-align:left";>Кегль шрифта:<br>
<select>
<option>10пт</option>
<option>12пт</option>
<option>14пт</option>
<select></p>
<b>Иллюстрация</b>
<br>Изображение:
<table>
<tr><td><img id="i" name="city" src="Images/01.jpg">
<td><img id="i" name="city" src="Images/02.jpg">
<td><img id="i"name="city" src="Images/03.jpg">
<td><img id="i" src="Images/04.jpg">
<td><img id="i" src="Images/05.jpg">
</table></p>
<p style="font-size:12pt;text-align:left";>Высота:<br>
<input type='text' id='high' name="high"> px<p> 
<input type='button' id='change' name="change" value="Изменить содержимое">
</div>
<h2 id="zag">Экология и климат Тюмени</h2>
<div id="kar"><img id="pic" src="Images/02.jpg"></div>
<p name="txt" class="par">
Климат в Тюмени загадочен и не предсказуем. Благодаря своему положению, Тюмень подвержена влиянию ветров, что идут с севера через  равнину и с юга из жарких казахских степей. Когда-то, во времена бабушек, в Тюмени были суровые зимы с низкими температурами и большим количеством снега.</p>
</p>
<p  name="txt" class="par">
Сейчас всё не так. Снежная зима – это редкость, а сама зима тёплая и температура ниже тридцати – скорее исключение, воспринимаемое как великий и, к сожалению, редкий праздник у детей школьного возраста. Обычно, такие детские праздники случаются в первом месяце года.
</p>
<p  name="txt"class="par">
Времена года здесь состоят из затяжных вёсен, короткого лета, осени и трёх-четырёх месячной зимы. Лето хоть и коротко, но в эти дни солнце особо старается выдать все причитающееся городу лучи тепла. Одежда на низкие плюсовые температуры висит у жителей города всю позднюю весну, лето и раннюю осень, и является наиболее часто носимой. А ситуация, когда утром выходишь в тёплой весенней куртке, в обед её оставляешь на работе и идёшь погулять под приятным солнцем в рубашке, вечером возвращаешься домой опять в куртке под дождём, а поздно вечером отправляешься гулять с собакой уже в куртке на минусовую температуру под снег, никого не удивляет, хоть и является не приятным осенним или весенним сюрпризом для большинства горожан.
</p>
<p  name="txt" class="par">
Город сейчас в стадии экономического и территориального роста. Вследствие чего экологическое состояние ежегодно ухудшается. Будучи и ранее неудовлетворительной, экологическая ситуация становиться всё более критичной. Чем ближе к центру города, тем более сильно влияние выбросов транспорта. Зелёные насаждения в городе справиться не могут. Из-за количества транспорта, дороги расширяются за счёт прилегающим к ним территориям засаженным газонами и деревьями. Особенно сильно воздействие ТЭЦ, которые из-за роста города вынуждены работать всё более интенсивно.
</p>
<p name="txt" class="par">
Кроме ТЭЦ есть ещё немало предприятий оказывающих негативное влияние на окружающую среду и здоровье граждан города. И их число продолжает увеличиваться. И ещё одним фактором приближающий переход Тюмени в список городов с вредной для проживания экологией – посёлки, всё сильнее разрастающиеся вокруг города и оттесняющие леса от его границ.
</p>
</div>

function position(){
document.getElementById("zag").style.textAlign="right";}
var virzag=document.getElementById("right");
 virzag.onclick = position;

такая функция работает для заголовка,потому что он один,а как сделать,чтобы можно было сделать для всего текста выравнивание,если текст поделен на абзацы ,если применять аналогичную функцию,то работает только для одного,первого абзаца
Ответить с цитированием
  #2 (permalink)  
Старый 17.05.2017, 23:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

rfhnjirf,
<style type="text/css">
 #content.right .par, #content.right h2{
    text-align: right;
  }
  </style>
<script>
   function position(){
document.getElementById("content").classList.add("right")}
var virzag=document.getElementById("right");
 virzag.onclick = position;

</script>
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2017, 06:08
Новичок на форуме
Отправить личное сообщение для rfhnjirf Посмотреть профиль Найти все сообщения от rfhnjirf
 
Регистрация: 09.05.2017
Сообщений: 8

function text1(){


	document.getElementById("content").classList.add("right")}

	var virzag=document.getElementById("right2");

	 virzag.onclick = text1;
function text2(){

	document.getElementById("content").classList.add("center")}

	var textcenter=document.getElementById("center2");

	 textcenter.onclick = text2;
function text3(){

	document.getElementById("content").classList.add("justify")}

	var textcjustify=document.getElementById("justify");

	 textcjustify.onclick = text3;
	 function text4(){

	document.getElementById("content").classList.add("left")}

	var textleft=document.getElementById("left2");

	 textleft.onclick = text4;

я написал по аналогии такие же функции, но они не работают при повторном клике
Допустим,мы кликнули на выравнивание по ширине,потом по центру,вернулись на ширину и оно не будет работать
как реализовать,чтобы и при повторном клике работало ?
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2017, 10:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

rfhnjirf,
напишите функцию которая будет удалять все назначенные классы for по массиву классов и вставьте её перед назначением класса во все функции
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как узнать id из нескольких форм с одним class furashcka Events/DOM/Window 3 01.05.2014 09:15
Прогресс бар для загрузки нескольких файлов через XHR Ваяс AJAX и COMET 0 04.12.2013 13:03
Как сделать для нескольких форм? j.r.r AJAX и COMET 8 08.09.2013 16:32
способы организации кода melky Общие вопросы Javascript 17 01.10.2011 22:57
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30