Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2014, 02:17
Интересующийся
Отправить личное сообщение для ОлежкаKiev Посмотреть профиль Найти все сообщения от ОлежкаKiev
 
Регистрация: 09.04.2014
Сообщений: 11

Не происходит выравнивание текста.
Задание:
Создайте Web-страницу, в которой выводится горизонтальная линия с заданными атрибутами (первоначально горизонтальная линия выводится со значениями, которые равны значениям по умолчанию). С помощью радиокнопки можно задать значение атрибута align: left, center или right, с помощью раскрывающегося меню с несколькими цветами можно задать значение атрибута color и с помощью двух текстовых полей можно задать значение атрибутов width и size. При нажатии кнопки "Выполнить" линия (с помощью сценария JavaScript и средств DOM) выводится с заданными значениями атрибутов.

Вот что было мною написано для задания по выравниванию, и уже на этом моменте я обрыл весь инет в поиске проблемы.

<html>
<head>
</head>
<body>
<p id="1">JavaScript</p>
<form name="f">
<input type="radio" name="align" value="left" />Rleft<br />
<input type="radio" name="align" value="center" />Rcentr<br />
<input type="radio" name="align" value="right" />Right<br />
<input type="button" value="Изменить цвет" onclick="document.getElementById('1').style.text-align = 'currentradio' "/>
</form>
<script>
function radiocheck()
{
var currentradio;
if (document.f.align[0].checked) {
currentradio='left';
}
if (document.f.align[1].checked) {
currentradio='center';
}
if (document.f.align[2].checked) {
currentradio='right';
}
}
</script>
</body>
</html>


В чем проблема?А если можно то и решенное задание.Зарание благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2014, 02:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от ОлежкаKiev
style.text-align
http://htmlbook.ru/css/text-align
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2014, 02:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

ОлежкаKiev,
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title></title>
</head>

<body>
  <p id="1">JavaScript</p>

  <form name="f" id="f">
    <input type="radio" name="align" value="left" checked="checked">Rleft<br>
    <input type="radio" name="align" value="center">Rcentr<br>
    <input type="radio" name="align" value="right">Right<br>
    <input type="button" value="горизонтальное выравнивание текста"
    onclick="document.getElementById('1').style.textAlign = radiocheck()">
  </form><script>
         	function radiocheck()
         	{
         	  var currentradio;
         	  if (document.f.align[0].checked) {
         	    currentradio = 'left';
         	  }
         	  if (document.f.align[1].checked) {
         	    currentradio = 'center';
         	  }
         	  if (document.f.align[2].checked) {
         	    currentradio = 'right';
         	  }
         	  return currentradio
         	}
         </script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2014, 03:00
Интересующийся
Отправить личное сообщение для ОлежкаKiev Посмотреть профиль Найти все сообщения от ОлежкаKiev
 
Регистрация: 09.04.2014
Сообщений: 11

Огромное спасибо, а как можно сделать с цветами?У меня была идея сделать с помощью вот такой вот штуки:
<input type="color">
но как после этого сделать что бы код выбраного цвета применился к нашему тексту?
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2014, 03:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

ОлежкаKiev,
по ссылке выше найдите color и прочитайте статью .
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2014, 03:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

<input type="color"> может проще селектом
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title></title>
</head>

<body>
  <p id="1">JavaScript</p>

  <form name="f" id="f">
    <input type="radio" name="align" value="left" checked="checked">Rleft<br>
    <input type="radio" name="align" value="center">Rcentr<br>
    <input type="radio" name="align" value="right">Right<br>
    <input type="button" value="применить стиль для текста"
    onclick="radiocheck()">
    <input type="color" name="color">
  </form><script>
         	function radiocheck()
         	{
         	  var currentradio;
         	  if (document.f.align[0].checked) {
         	    currentradio = 'left';
         	  }
         	  if (document.f.align[1].checked) {
         	    currentradio = 'center';
         	  }
         	  if (document.f.align[2].checked) {
         	    currentradio = 'right';
         	  }
         	  document.getElementById('1').style.textAlign =  currentradio;
              document.getElementById('1').style.color =  document.f.color.value
         	}
         </script>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2014, 03:20
Интересующийся
Отправить личное сообщение для ОлежкаKiev Посмотреть профиль Найти все сообщения от ОлежкаKiev
 
Регистрация: 09.04.2014
Сообщений: 11

Я чесно скажу что плохо знаю Javascript. ВОт сейчас интерисует такой вопрос:можно ли в кнопку вставить два DOM обьекта. Что бі примерно віглядело так(К ПРИМЕРУ):
<input type="button" value="Изменить цвет" onclick="document.getElementById('1').style.text-align = 'currentradio'+document.getelementbyid('1').style. color='value' "/>

Что бы по нажатию менялся цвет и выравнивание текста.Я там поставил + между эелементами DOМ, но на самом деле я не знаю что нужно ставить что бі их совместить в кнопке.=(Подскажите.И еще интересно как будет там это выглядеть селектом?
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2014, 04:02
Интересующийся
Отправить личное сообщение для ОлежкаKiev Посмотреть профиль Найти все сообщения от ОлежкаKiev
 
Регистрация: 09.04.2014
Сообщений: 11

Создайте Web-страницу, в которой выводится горизонтальная линия с заданными атрибутами (первоначально горизонтальная линия выводится со значениями, которые равны значениям по умолчанию). С помощью радиокнопки можно задать значение атрибута align: left, center или right, с помощью раскрывающегося меню с несколькими цветами можно задать значение атрибута color и с помощью двух текстовых полей можно задать значение атрибутов width и size.
Я пытался сделать это добавлением строчек :
<input name="input"><br>
document.getElementById('1').style.width = document.f.input.value;
Но не получается ничего=(
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title></title>
</head>

<body>
  <p id="1">_____________________________________________________________________________________________________________________</p>

  <form name="f" id="f">
    <input type="radio" name="align" value="left" checked="checked">Rleft<br>
    <input type="radio" name="align" value="center">Rcentr<br>
    <input type="radio" name="align" value="right">Right<br>
	<input type="color" name="color"><br>
	<input name="input"><br>
    <input type="button" value="применить стиль для текста"
    onclick="radiocheck()">
   
  </form><script>
         	function radiocheck()
         	{
         	  var currentradio;
         	  if (document.f.align[0].checked) {
         	    currentradio = 'left';
         	  }
         	  if (document.f.align[1].checked) {
         	    currentradio = 'center';
         	  }
         	  if (document.f.align[2].checked) {
         	    currentradio = 'right';
         	  }
         	  document.getElementById('1').style.textAlign =  currentradio;
              document.getElementById('1').style.color =  document.f.color.value;
			  document.getElementById('1').style.width = document.f.input.value;
         	}
         </script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2014, 10:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

ОлежкаKiev,
у вас всё верно - имена лучше давать осмысленно
Сообщение от ОлежкаKiev
id="1"
Сообщение от ОлежкаKiev
name="input"
и единицы измерения незабывать px
чтобы сворачивало текст в <p> вместе с шириной в css overflow: hidden;
про остальное читать тут http://learn.javascript.ru/
http://learn.javascript.ru/styles-and-classes
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
  p{
    background-color: rgba(0, 128, 0, 1);
    overflow: hidden;
     color: rgba(255, 255, 0, 1);
  }

  </style>
  <title></title>
</head>

<body>
  <p id="1">_____________________________________________________________________________________________________________________</p>

  <form name="f" id="f">
    <input type="radio" name="align" value="left" checked="checked">Rleft<br>
    <input type="radio" name="align" value="center">Rcentr<br>
    <input type="radio" name="align" value="right">Right<br>
	<input type="color" name="color"><br>
	<input name="input" value="100"><br>
    <input type="button" value="применить стиль для текста"
    onclick="radiocheck()">

  </form><script>
         	function radiocheck()
         	{
         	  var currentradio;
         	  if (document.f.align[0].checked) {
         	    currentradio = 'left';
         	  }
         	  if (document.f.align[1].checked) {
         	    currentradio = 'center';
         	  }
         	  if (document.f.align[2].checked) {
         	    currentradio = 'right';
         	  }
         	  document.getElementById('1').style.textAlign =  currentradio;
              document.getElementById('1').style.color =  document.f.color.value;
			  document.getElementById('1').style.width = document.f.input.value + "px";
         	}
         </script>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 01.06.2014, 13:42
Интересующийся
Отправить личное сообщение для ОлежкаKiev Посмотреть профиль Найти все сообщения от ОлежкаKiev
 
Регистрация: 09.04.2014
Сообщений: 11

p{
08
    background-color: rgba(0, 128, 0, 1);
09
    overflow: hidden;
10
     color: rgba(255, 255, 0, 1);
11
  }

что это значит?
Зачем оно?без него никак?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить отмену выделения текста от клика мышью? Маэстро Internet Explorer 0 03.04.2012 21:21
Вертикальное выравнивание текста внутри select'а dr_gluk (X)HTML/CSS 4 16.12.2011 16:54
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02
Получение позиции текста по координатам traa Events/DOM/Window 20 08.02.2011 14:19
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02