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

由于不知道正确的方法，在网上做了很多研究之后，我发现有很多不同的方法来做一些事情，这让我很困惑。我试过的方法，有点工作如下

我的CSS

#Content {
left:0px;
top:1px;
width:988px;
z-index:1;
background-color: #FFFFFE;
}

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

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}

我的JS

#Content {
left:0px;
top:1px;
width:988px;
z-index:1;
background-color: #FFFFFE;
}

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

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}

请等待智慧的注入：）

在这里发布并阅读示例后，我最近尝试了什么——我的JS

#Content {
left:0px;
top:1px;
width:988px;
z-index:1;
background-color: #FFFFFE;
}

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

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将背景变成红色后，我在IE中遇到了一个错误…-第29行中的属性无效，该行包含上面的所有toString（16）

有人能解释为什么IE中出现错误吗？我正在检查我是否高于0，所以数字应该保持在0或更高。其他浏览器没有给出我能看到的错误。一旦它的工作，我将改变它-这只是一个“黑客在一起”的测试-我会使它更有效，以后当它在我想要的页面上

我花了大约一个小时试图将变量传递给setTimeout，直到我意识到我做不到。啊！lol.Globals：（迫不及待地等待CSS3在所有浏览器中完全兼容

#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);

以上是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);

---

我建议使用css3或jquery（javascript库）实现这一点 要使用css3实现这一点非常简单，本文应该包含所有必要的信息

要使用jQuery，您需要下载jQuery，最好有一点javascript经验，尽管对于这样简单的事情通常不需要使用jQuery。这是您想要使用的jQuery函数：

---

我建议使用css3或jquery（javascript库）实现这一点 要使用css3实现这一点非常简单，本文应该包含所有必要的信息

要使用jQuery，您需要下载jQuery，最好有一点javascript经验，尽管对于这样简单的事情通常不需要使用jQuery。这是您想要使用的jQuery函数：

---

我的朋友最后为我做了一个闭包，这正是我所需要的。我给了scott答案，因为如果更多浏览器兼容，我会使用你的答案。我的朋友最后为我做了一个闭包，这正是我所需要的。我给scott答案，因为如果更多浏览器兼容，我会使用你的答案。