Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

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

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Работа со стилями при помощи 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>

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

</style>

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>

Таблица:

<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>

<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>

function test ( form ) {

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

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

else form.submit ()

}

</script>

</head>

<body>

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

</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.

⇐ Предыдущая 1 2 3 4 5 67

Познавательные статьи:

Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров

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

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