Не происходит выравнивание текста.
Задание:Создайте 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>
В чем проблема?А если можно то и решенное задание.Зарание благодарен. |
Цитата:
|
Олежка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>
|
Огромное спасибо, а как можно сделать с цветами?У меня была идея сделать с помощью вот такой вот штуки:
<input type="color"> но как после этого сделать что бы код выбраного цвета применился к нашему тексту? |
ОлежкаKiev,
по ссылке выше найдите color и прочитайте статью . |
:cray: <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>
|
Я чесно скажу что плохо знаю Javascript. ВОт сейчас интерисует такой вопрос:можно ли в кнопку вставить два DOM обьекта. Что бі примерно віглядело так(К ПРИМЕРУ):
<input type="button" value="Изменить цвет" onclick="document.getElementById('1').style.text-align = 'currentradio'+document.getelementbyid('1').style. color='value' "/> Что бы по нажатию менялся цвет и выравнивание текста.Я там поставил + между эелементами DOМ, но на самом деле я не знаю что нужно ставить что бі их совместить в кнопке.=(Подскажите.И еще интересно как будет там это выглядеть селектом? |
Создайте 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>
|
ОлежкаKiev,
у вас всё верно - имена лучше давать осмысленно Цитата:
Цитата:
чтобы сворачивало текст в <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>
|
p{
08
background-color: rgba(0, 128, 0, 1);
09
overflow: hidden;
10
color: rgba(255, 255, 0, 1);
11
}
что это значит? Зачем оно?без него никак? |
Цитата:
Цитата:
|
Ронни я премного благодарен ввам за помощь!Еще остался последний штрих:атрибут size я пробовал сделать это добавлением пары строчек:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
overflow: hidden;
color: rgb(0, 0, 0);
}
</style>
<title></title>
</head>
<body>
<p id="1">_____________________________________________________________________________________________________________________</p>
<form name="f" id="f">
Выберете выравнивение:<br>
<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>
Введите величину параметра weidth:
<input name="input" value="100"><br>
Введите величину параметра size:
<input name="input2" 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";
document.getElementById('1').style.size = document.f.input2.value + "px";
}
</script>
</body>
</html>
Но ничего к сожалению не меняется...что я делаю не так? Еще заметил что теперь не происходит ВЫРАВНИВАНИЕ ТЕКСТА. |
Цитата:
Цитата:
http://htmlbook.ru/html/hr |
ОлежкаKiev,
на всякий случай как работать с атрибутами http://learn.javascript.ru/attribute...tom-properties |
Цитата:
|
|
Думаю теперь ошибка моя в представлении тега <hr>.Но хочу заметить, что width меняется, а цвет ширина и віравнивание - нет.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="2" id="2">
<hr noshade>
</form>
<form name="f" id="f">
Задайте выравнивание линии:<br>
<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="color" name="color"><br>
Длинну линии:
<input name="input" value="100"><br>
Ширину линии:
<input name="input2" 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('2').style.color = document.f.color.value;
document.getElementById('2').style.width = document.f.input.value + "px";
document.getElementById('2').style.align = currentradio;
document.getElementById('2').style.size = document.f.input2.value;
}
</script>
</body>
</html>
|
ОлежкаKiev,
вы 14 пост прочитайте и переделайте строки 40 - 43 |
ОлежкаKiev,
:cray: :cray: :cray:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr id="2">
<form name="f" id="f">
Задайте выравнивание линии:<br>
<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 name="input2" 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('2').color = document.f.color.value;
document.getElementById('2').width = document.f.input.value + "px";
document.getElementById('2').align = currentradio;
document.getElementById('2').size = document.f.input2.value;
}
</script>
</body>
</html>
|
Огромное спасибо, узнал много чего нового, респект!;)
|
| Часовой пояс GMT +3, время: 12:02. |