Не зная правильного пути, после долгих исследований в Интернете я нашел так много разных способов сделать что-то запутанное. То, как я пытался, и вроде как работал, заключается в следующем ...
Мой CSS
#Content {
left:0px;
top:1px;
width:988px;
z-index:1;
background-color: #FFFFFE;
}
Мой JS
function Gradients(id) //<- this id not used during testing, i hard coded it below
{
var getit = document.getElementById("Content");
getit.style.backgroundColor="#CCCCCC";
//alert(origcolor);
//var value = document.getElementById("Content").style.backgroundColor;
//var value = document.styleSheets[0].cssRules[0].style.backgroundColor;
}
Мой HTML (только тест)
<div onClick="Gradients("Content");">Gradients Test:<span>#XXXXXX</span></div>
Результаты Firebug - плохо?
<div id="Content" style="background-color: rgb(204, 204, 204);">
Чего я пытаюсь достичь
Моя цель состояла в том, чтобы прочитать фон поля ввода (у каждого есть идентификатор) и медленно изменить его на красный ОТ цвета ПО УМОЛЧАНИЮ в CSS, чтобы сообщить им, что поле неверно.
Прямо сейчас мой сайт просто захлопывает его до красного, и я подумал - как трудно это сделать, градиент цвета. Итак, на моей главной странице меньше беспорядка, поэтому я подумал, что постараюсь градиентно задеть фон. Как и в случае с другими вещами в Интернете, все гораздо сложнее, чем я думал.
Я даже потратил пару часов на чтение jQuery, но я не хочу извлекать целую библиотеку для этой 1 крошечной вещи, которую я буду делать.
Другая информация
Это похоже на то, как ЭТОТ веб-сайт stackoverflow исчезает с желтого на белый, DIV моего вопроса, когда я прихожу сюда. Кроме моего будет в полях ввода. У меня есть некоторые комментарии в моем JS, потому что я пробовал разные вещи. Я удалил некоторые вещи, которые были ужасны. Он работает как есть, НО я не знаю, хороший ли это способ, потому что firebug показывает, что он добавил что-то в DIV.
Мне нравится чистый код ... и мой код там выглядит ужасно, потому что я что-то добавил в DIV. Не могу ли я изменить значение CSS или это правильный способ сделать это?
Пара вопросов ...
1) Правильный способ сделать это?
2) Если это правильный способ сделать это, как мне удалить это изменение и вернуть ли оно обратно в стиль CSS? Или уродливый способ - просто вставить исходное значение, которое я сохранил, перед выполнением градиента.
3) ВАШ намного лучше чистый способ сделать это:)
4) Есть ли элегантный способ ЧИТАТЬ значение в таблице стилей CSS?
Причина, по которой я не пошел с document.stylesheets, для меня ... это казалось уродливым ... что, если это не [0]. Откуда я знаю, это всегда будет [0]. Что если в разных браузерах все по-другому? Вздох . Я не полностью понимаю DOM. Я понимаю , что такое дочерние узлы и родительские узлы, но при просмотре Firebug это огромный беспорядок повсюду, и я понятия не имею, где искать вещи, как вставлять вещи, и мне не нравится изменять Во всяком случае, DOM - мне бы понравилась простая вещь, как эта (и да, я предполагаю, что в приведенном ниже коде - если бы это было так просто), лол ...
Хотелось бы, чтобы это было так просто в javascript ...
$original_color = getElementById("Content").style.backgroundColor;
// loop through starting AT the original_color and gradient to red somehow
//start loop here
getElementById("Content").style.backgroundColor = newcolor;
// end loop here
В ожидании вливания мудрости, пожалуйста:)
ЧТО Я ПОПРОБОВАЛ ПОСЛЕ ПОЛОЖЕНИЯ И ЧИТАЯ - My JS
var RGradient = 0;
var GGradient = 0;
var GStop = 0;
var BGradient = 0;
var BStop = 100;
var idGradient;
function Gradients(id)
{
var startcolor = "#FFFFFE";
RGradient = hexToR(startcolor);
GGradient = hexToG(startcolor);
BGradient = hexToB(startcolor);
idGradient = document.getElementById(id);
window.setTimeout("GradientIt()", 10);
}
function GradientIt()
{
if (GGradient == GStop && BGradient == BStop) return;
if (GGradient > GStop) GGradient--;
if (BGradient > BStop) BGradient--;
idGradient.style.backgroundColor="#"+(RGradient).toString(16)+(GGradient).toString(16)+(BGradient).toString(16);
document.getElementById('gtest').innerHTML = "#"+(RGradient).toString(16)+(GGradient).toString(16)+(BGradient).toString(16);
window.setTimeout("GradientIt()", 5);
}
function hexToR(h) { return parseInt((cutHex(h)).substring(0,2),16) }
function hexToG(h) { return parseInt((cutHex(h)).substring(2,4),16) }
function hexToB(h) { return parseInt((cutHex(h)).substring(4,6),16) }
function cutHex(h) { return (h.charAt(0)=="#") ? h.substring(1,7) : h}
ОШИБКА в IE
Я получаю сообщение об ошибке в IE ПОСЛЕ того, как фон становится красным ... - Недопустимое свойство в строке 29 - строка со всеми значениями toString (16) в нем выше.
Может кто-нибудь объяснить, почему он выдает ошибку в IE, пожалуйста? Я проверяю, нахожусь ли я выше 0, поэтому числа должны оставаться 0 или выше. Другие браузеры не выдают ошибку, которую я вижу. Как только он заработает, я буду его менять - это всего лишь «взломанный вместе» тест - я сделаю его более эффективным позже, когда он появится на странице, которую я хочу.
Я потратил около часа, пытаясь передать переменные в setTimeout, прежде чем понял, что не могу. UGH! лол. Globals :( Не могу дождаться полной совместимости CSS3 во ВСЕХ браузерах.