Работа со стилями при помощи JavaScript 





Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Работа со стилями при помощи JavaScript



Работа с классом элемента

Свойство className соответствует HTML-атрибуту class. При помощи этого свойства можно присвоить элементу любой класс:

document.body.className = ”myclass”;

Поскольку элемент может одновременно иметь несколько классов, перечисленных через пробел то можно добавить к уже существующим классам новый:

document.body.className += ” myclass”;

Поиск и удаление класса в списке классов, разделенных пробелами, требует более сложного программного кода, связанного с разбором текстовой строки – свойства className.

Для того чтобы удалить все классы элемента, достаточно присвоить свойству className пустое значение:

document.body.className = ” ”;

Работа с CSS-свойствами

С помощью свойства style можно изменять большинство CSS-свойств, например:

element.style.color=”red”

Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:

background-color => backgroundColor

border-left-width => borderLeftWidth

Для удаления CSS-свойства необходимо присвоить ему пустое значение.

Существует свойство style.cssText, которое позволяет задать весь перечень css-свойств элемента через точку с запятой, аналогично тому, как это делается при описании свойств в css при помощи селекторов:

element.style.cssText="color: red !important; background-color: yellow;”

При установке style.cssText все существующие свойства style перезаписываются, поэтому рекомендуется работать с конкретными значениями css-свойств, а не с cssText.

Пример реализации выбора различных внешних видов таблицы:

<html>

<head>

<style type="text/css">

.mytable {text-align: center; font-family: Verdana; color: #D02090; background: #00FFFF; font-weight: bold; font-size: 120%}

</style>

<script>

function setStyle(form) {

table1 = document.getElementById('mytable');

switch (form.set_style.value) {

case "1": {

table1.style.cssText=""; //Сброс css-свойств

table1.className="mytable" //Установка класса

}

; break;

case "2": {

table1.className="" //Сброс класса

table1.style.cssText=""; //Сброс css-свойств

table1.style.cssText="color: red; background-color: yellow;" //Установка перечня css-атрибутов

table1.style.width="60%" //Установка css-атрибута

}

; break;

case "3": {

table1.setAttribute("border", "0") //установка атрибута элемента table

}

; break;

case "4": {

table1.setAttribute("border", "1") //установка атрибута элемента table

}

; break;

}

}

</script>

</head>

<body>

Таблица:

<table id="mytable" border="1">

<tr>

<th>Столбец1</th>

<th>Столбец2</th>

<th>Столбец3</th>

</tr>

<tr>

<td>Столбец1</td>

<td>Столбец2</td>

<td>Столбец3</td>

</tr>

<table>

<br>

Стиль таблицы:

<form>

<select name="set_style" size="1" onChange="setStyle(this.form)">

<option value="0">

<option value="1">Мой стиль

<option value="2">Цветной

<option value="3">Без сетки

<option value="4">С сеткой

</form>

</body>

</html>

Задание на лабораторную работу

На страницу с перечнем категорий добавить форму для удаления и добавления категорий. Предусмотреть поля для ввода наименования категории и имени файла, который будет открываться при выборе категории.

На страницы с перечнем объектов добавить форму для удаления и добавления объектов. Предусмотреть поля для ввода наименования объекта, имени файла, который будет открываться при выборе объекта, а также имени файла с изображением пиктограммы объекта.

Примечание: при реализации для добавления категорий использовать список, для добавления объектов – таблицу, или наоборот.

На страницу с перечнем категорий добавить форму для выбора «темы» сайта. Выбор темы должен сопровождаться изменением дизайна отображения меню категорий, меню объектов. Необходимо использовать изменение классов элементов, изменение css-свойств, изменение атрибутов.

 

http://www.web-lesson.ru/site-creation/html/38-osnovy-css-i-html-blochnaya-verstka.html

http://dunaevv1.narod.ru/inclhtml.htm

http://dunaevv1.narod.ru/db0.htm

http://forum.codeby.net/topic5887.html

Лабораторная работа 5. Сценарии PHP. Обработка форм на стороне сервера

Язык серверных сценариев PHP

Обработка форм на PHP

 

 

<html>

<head>

<script language="JavaScript">

function test(form) {

if (form.A.value == "" || form.B.value == "" || form.C.value == "")

alert("Пожалуйста, введите значения всех коэффициентов!");

else form.submit()

}

</script>

</head>

<body>

Квадратное уравнение:

<form action = "http://ora-srv.stud.surgu.ru/php_form.php" method="get">

<input type="text" name="A"/>X^2+<input type="text" name="B"/>X+<input type="text" name="C"/>

<input type="button" value="Решить" onclick="test(this.form)"/>

<input type="hidden" name="H" value="1">

</form>

<?php

if ($_GET["H"]!='')

{

$D = $_GET["B"]*$_GET["B"]-4*$_GET["A"]*$_GET["C"] ;

$X1 = (-$_GET["B"]+SQRT($D))/(2*$_GET["A"]);

$X2 = (-$_GET["B"]-SQRT($D))/(2*$_GET["A"]);

echo("Дискриминант уравнения:");

echo($D);

echo("<br>Корни уравнения:");

echo("<br>X1: ");echo($X1);

echo("<br>X2: ");echo($X2);

}

?>

</body>

</html>

 

5.3. Лабораторное задание

Перенести все файлы сайта, созданного в предыдущих работах, на сервер в указанную преподавателем папку. Проверить работу сайта.

Обработку формы, разработанной по заданию в лабораторной работе №3, реализовать на стороне сервера в виде сценария PHP. При этом необходимо выполнить проверку правильности ввода данных на стороне клиента в сценарии JavaScript.

 





Последнее изменение этой страницы: 2016-09-13; просмотров: 298; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 54.224.133.198 (0.006 с.)