幕后发生了什么，这是执行此操作的正确方法吗？ （通过Javascript修改DOM）

Question

由于不知道正确的方法，经过在网上进行大量研究后，我发现有很多不同的方法可以做一些令人困惑的事情。我尝试过的方法如下...

我的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);">

我想要实现什么

我的目标是读取输入字段的背景（每个字段都有一个 id），并慢慢将其从默认颜色更改为红色CSS 让他们知道该字段是不正确。

现在我的网站只是把它变成红色，我想 - 渐变颜色有多难。所以，我的主页不再那么混乱，所以我想我应该尝试对某些东西的背景进行渐变。与所有网络内容一样，它比我想象的要混乱。

我什至花了几个小时阅读 jQuery，但我不想为我要做的这一件小事引入整个库。

其他信息

这有点像当我来到这里时，这个 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

等待中请注入智慧:)

在此处发布和阅读示例后我最近尝试了什么 - 我的 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，然后才意识到我不能。 呃！哈哈。全局变量 :( 迫不及待地希望 CSS3 在所有浏览器中完全兼容。

Answer 1

我建议使用 css3 或 jquery （一个 javascript 库）来实现这一点
使用 css3 做到这一点相当简单，本文应该包含所有必要的信息
http://net.tutsplus.com/ tutorials/html-css-techniques/css-fundametals-css-3-transitions/

要使用 jQuery 来完成此操作，您需要下载 jquery 并且最好有一点经验javascript，尽管通常不需要为像这样的简单事情而选择 jQuery。这是您想要使用的 jQuery 函数：
http://api.jquery.com/animate/

Answer 2

#content {
    left:0px;
    top:1px;
    width:988px;
    z-index:1;
    background-color: #FFFFFE;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

#content:focus {
    background-color: #f00;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

上面是 CSS3，适用于许多浏览器。然而 IE 支持（一如既往）缺乏。

通过 javascript/jquery...

function animate_bg(ele, from, to) {
from += from > to ? -1 : 1;
if(!$.support.opacity){
    if(from != to){
        var opStr = (Math.round(from * 25.5)).toString(16);
        //alert(opStr)
        ele.css({background:'transparent',filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#" + opStr + "fffff0, endColorstr=#" + opStr + "f00000)"});   
    }else{
        ele.css({background:'transparent',filter:"none"});   
    }
}else{
    ele.css("backgroundColor", "rgba(255, 0, 0, " + (from) / 10 + ")"); 
}

if(from != to)  
    setTimeout(function() { animate_bg(ele, from, to) }, 60);
}

以及用法...

    animate_bg($('...'), 8, 0);