javascript - 幕后发生了什么，这是正确的方法吗？ (通过 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

请等待智慧的注入(inject):)

在此处发布和阅读示例后我最近尝试了什么 -- 我的 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 将背景变为红色后，我在 IE 中遇到错误... - 第 29 行中的无效属性，这是上面所有 toString(16) 的行。

有人可以解释一下为什么它在 IE 中给出错误吗？我正在检查我是否在 0 以上，所以数字应该保持为 0 或更高。其他浏览器不会给出我能看到的错误。一旦它开始工作，我将对其进行更改 - 这只是一个“hacked together”测试 - 稍后当它出现在我想要的页面上时，我会提高它的效率。

我花了大约一个小时尝试将变量传递给 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/