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中的DEFAULT颜色，让他们知道字段不正确。

现在我的网站只是把它砸到红色，我想 - 渐变颜色有多难。所以，我的主页杂乱少了所以我想我会尝试渐变某些东西的背景。与所有网络内容一样，它比我想象的要糟糕。

我甚至花了几个小时阅读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，然后才意识到我不能。 UGH！大声笑。 Globals :(等不及所有浏览器中的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);

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

2 个答案:

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

2 个答案:

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