Question

如何在变量中存储一个div的背景颜色，然后使用该变量仅使用javascript更改另一个div的背景颜色？

var b2 = document.getElementById("box2"),
b3 = document.getElementById("box3");

function d2(){
document.getElementById("box3").style.backgroundColor = b2.style.backgroundColor;
document.getElementById("box2").style.backgroundColor = b3.style.backgroundColor;
}

我制作了两个方框，红色为box2，绿色为box3。然后尝试通过将颜色存储在变量中来交换颜色，并将变量的颜色分配给div，但这并不起作用。任何帮助，将不胜感激。提前致谢。

这段代码对我来说很好。谢谢你的帮助。

function getStyle(x,styleProp) {
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}
function d2(){
    b2 = document.getElementById("box2")
    b3 = document.getElementById("box3")
    y1 = getStyle ( b3, 'background-color' )
    document.getElementById("box3").style.backgroundColor = getStyle ( b2, 'background-color' )
    document.getElementById("box2").style.backgroundColor = y1
}

Answer 1

为你创造了一个小提琴：

http://jsfiddle.net/JXyx2/

<强> JS：

var storedColor = $('#one').css('background-color');

// set stored color two other div
$('#two').css('background-color', storedColor);

Answer 2

    <div id="d1" style="width:100px;height:100px;border:1px solid;background-color:red"></div>
    <div id="d2" style="width:100px;height:100px;border:1px solid;"></div>


    <button id="click"  type="button">click to change the color</button> 
    <script>

    var color=$("#d1").css("background-color");

    $("#click").click(function()
    {
        $("#d2").css("background-color",color);
    })
    </script>

Answer 3

仅使用javascript试试这个

var divColor = document.getElementById("id").style.backgroundColor; 
                                            //you get the color of div

然后使用：

将此应用于另一个div

document.getElementById("id1").style.backgroundColor=divColor;

<强>更新

 <div id="box2">
         <button type="button" class="d2" onClick="d2(this)">down</button>
        </div>
    <div id="box3">
        </div>

    function d2(element)
{
        var c = window.getComputedStyle(element.parentElement).backgroundColor;
        document.getElementById("box3").style.backgroundColor=c;
}

Working Fiddle

Answer 4

<div id="d1" style="width:100px;height:100px;border:1px solid;background-color:red"></div>
<div id="d2" style="width:100px;height:100px;border:1px solid;"></div>


<button id="click"  type="button"  onclick="change()">click to change the color</button> 
<script>

var color=document.getElementById("d1").style.backgroundColor;


function change()
{
    document.getElementById("d2").style.backgroundColor=color;

}
</script>

将背景颜色存储在变量中

4 个答案: