Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Работа со стилями при помощи JavaScript ⇐ ПредыдущаяСтр 7 из 7
Работа с классом элемента Свойство 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; просмотров: 471; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.191.223.123 (0.011 с.) |
