Сначала рассмотрим Способы смены цвета по клику на строке.
Способ 1 и способ 2 меняют цвет строки при клике на строку.
Оба способа приводят к одному и тому же результату. Кликни по надписи:
Щелкни по строке и ее цвет изменится. Щелкни еще раз!
Способ 1
Способ основан на задании стиля перед тэгом <body>. Первый
щелчок по фону меняет цвет строки, второй щелчок возвращает
исходный цвет строки. Вот кодировка программы.
<html>
<head>
</head>
<style>
.s {color:blue;;font-size:40}
.sn { color:red;;font-size:40}
</style>
<body>
<div class="s" onclick="this.className = (this.className == 's' ? 'sn' : 's')">
Щелкни по строке и ее цвет изменится Щелкни еще раз!</div>
</body>
</HTML>
Способ 2
Способ основан на скрипте для
функции ChangeColor(Element) с условным оператором. Первый
щелчок по строке изменяет ее цвет, второй - отменяет.
Код скрипта.
</head>
<script>
function ChangeColor(Element) {
if (Element.style.color == 'green')
Element.style.color = 'red'
else
Element.style.color = 'green'
return false
}
</script>
<body>
<p style="color: red; font-size:60" onclick="return ChangeColor(this);">Изменить
цвет по клику: первый щелчок изменяет цвет, второй - отменяет</p>
</body>
Теперь рассмотрим
Способы смены цвета по клику на фоне
Способы 3, 4 и 5 меняют цвет строки при клике по фону. Все
способы приводят к одному и тому же результату. В отличие от
способов 1 и 2, для изменения цвета строки достаточно
кликнуть в любом месте: и выше строки и ниже строки. Кликни в любом месте.
Кликни в любом месте и
цвет строки изменится. Щелкни еще раз!
Способ 3
В этом способе для вывода строки используется свойство innerHTML. Строка
выводится по коду (строку не разрывать).
mim.innerHTML ="<span style='color:код цвета'>Щелкни по
строке и ее цвет изменится.
Щелкни еще раз!"
Перед скриптом не забывать указать идентификатор и
прописать в нем строку.
<div id="mim" style='color:#ff0000;font-weight:bold;
font-family:Arial;font-size:35px'>Щелкни по строке и ее цвет изменится. Щелкни еще раз!</div>
<script>
var clic = 0;
function WW() {
if (clic == 0) {
mim.innerHTML ="<span style='color:#0000ff'>Щелкни по строке и ее цвет
изменится. Щелкни еще раз!</span>"; //строку не разрывать
clic = 1;
}
else {
mim.innerHTML ="<span style='color:#ff0000'>Щелкни по строке и ее цвет
изменится.
Щелкни еще раз!</span>";
clic = 0;
}
}
document.addEventListener("click", WW)
</script>
Способ 4
В этом способе используется функция с условным оператором. Вывод строки
происходит по коду
document.getElementById("my").style.color="код цвета"
Ниже приводится кодировка
скрипта
<script>
var clic = 0;
function SI() {
if (clic == 0) {
document.getElementById("my").style.color="red";
clic = 1;
}
else {
document.getElementById("my").style.color="blue";
clic = 0;
}
}
document.addEventListener("click", SI);
</script>
<body>
<p id="my" style=" cursor:hand; font-size:50; color:blue">
Текст строки.
Способ 5
Способ похож на способ 3: для вывода строки используется
свойство innerHTML. Однако, в этом способе идентификатор
не нужен. Строка выводится по коду (строку не разрывать)
document.body.innerHTML ="<span style='color:код цвета;
font-size:40'>Щелкни по строке и ее цвет изменится.
+Щелкни еще раз!</span>"; //строку не разрывать
Ниже приводится кодировка скрипта.
<html>
<head>
<script>
var clic = 0;
function WW(){
if (clic == 0) {
document.body.innerHTML ="<span style='color:#ff0000;font-size:40'>Щелкни
по строке
и ее цвет изменится.Щелкни еще раз!</span>"; //строку не разрывать
clic = 1;}
else {
document.body.innerHTML ="<span style='color:#0000ff;font-size:40'>Щелкни
по строке
и ее цвет изменится.Щелкни еще раз!</span>";
clic = 0;
}
}
document.addEventListener("click", WW)
</script>
</head>
<body>
<span style='color:#0000ff;font-size:40'>Щелкни по строке
и ее цвет изменится.Щелкни еще раз!</span>
</body>
</html>
Вместо клика (щелчка) можно использовать наведение курсора
Код HTML
<body>
<a onmouseover="this.style.color='red'"
onmouseout="this.style.color='cyan'"><span style='font-size:50'>Наведи курсор</span></a>
Наведи курсорКод CSS
<body>
<style>
#r {
color:red; font-size:60px;
}
#r:hover{color:blue;}
</style>
<body>
<a id="r"><Наведи курсор/a>
Наведи курсор
