Einfügen css Eigenschaftswert als Text in einem gegebenen div von jquery

Question

Ich brauche einen Weg, um den Wert der CSS-Eigenschaft "Farbe" als Text in div # consola für jeden der drei Divs einfügen - #position, # position2 , # position3 - in den Klassen -p1color, p2color, p3color - bzw. wie sich der Wert ändert, wenn die Bildlaufleiste fortschreitet.

$(window).scroll(function(event) { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 0 && scroll < 1000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(0,255,65,1.00))', 
 
     'background': 'rgba(0,40,90,1.00)' 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(255,248,0,1.00)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(255,0,215,1.00)', 
 
    }) 
 
    } 
 
    if (scroll > 1000 && scroll < 2000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(255,242,0,1.00)', 
 
     'background': 'rgba(255,0,144,1.00)' 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(0,100,206,1.00)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(0,255,7,1.00)', 
 
    }) 
 
    } 
 
    if (scroll > 2000 && scroll < 3000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(0,94,255,1.00)', 
 
     'background': 'rgba(255,0,226,1.00)' 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(155,0,255,1.00)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(224,224,224,1.00)', 
 
    }) 
 
    } 
 

 
    if (scroll > 3000 && scroll < 4000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(255,2,6,1.00)', 
 
     'background': 'rgba(255,2,6,1.00)' 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(69,66,179,1.00)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(124,141,245,1.0)', 
 
    }) 
 
    } 
 
    if (scroll > 4000 && scroll < 5000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(0,94,255,1.00)', 
 
     'background': 'rgba(255,0,226,1.00)' 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(224,224,224,1.00)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(155,0,255,1.00)', 
 
    }) 
 
    } 
 
    if (scroll > 5000 && scroll < 6000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(211,104,0,1.0)', 
 
     'background': 'rgba(255,238,0,1.00)', 
 
     'text-shadow': 'none' 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(176,50,0,1.0)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(100,16,5,1.00)', 
 
    }) 
 
    } 
 
    if (scroll > 5000 && scroll < 6000) { 
 
    $('.position').css({ 
 
     'color': 'rgba(196,173,217,1.00)', 
 
     'background': 'rgba(243,255,217,1.00)', 
 
    }) 
 
    $('.position2').css({ 
 
     'color': 'rgba(136,168,191,1.0)', 
 
    }) 
 
    $('.position3').css({ 
 
     'color': 'rgba(68,47,168,1.0)', 
 
    }) 
 
    } 
 
});

body { 
 
    text-align: center; 
 
    height: 10000px; 
 
} 
 
.position { 
 
    color: blue; 
 
    display: inline; 
 
    margin-top: 5px; 
 
    position: fixed; 
 
} 
 
.position2 { 
 
    color: grey; 
 
    display: inline; 
 
    margin-top: 25px; 
 
    position: fixed; 
 
} 
 
.position3 { 
 
    color: green; 
 
    display: inline; 
 
    margin-top: 45px; 
 
    position: fixed; 
 
} 
 
#consola { 
 
    background: grey; 
 
    display: inline; 
 
    margin-top: 65px; 
 
    position: fixed; 
 
    width: 300px; 
 
    height: 100px; 
 
    margin-left: -150px; 
 
} 
 
.p1color { 
 
    background: red; 
 
} 
 
.p2color { 
 
    background: green; 
 
} 
 
.p3color { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="position"> 
 
    AAAA 
 
</div> 
 
<div class="position2"> 
 
    BBBBB 
 
</div> 
 
<div class="position3"> 
 
    CCCC 
 
</div> 
 

 
<div id="consola"> 
 
    <div class="p1color"> 
 
    B 
 
    </div> 
 
    <div class="p2color"> 
 
    C 
 
    </div> 
 
    <div class="p3color"> 
 
    D 
 
    </div> 
 
</div>

Answer 1

können Sie jQuery verwenden:

var color=$('the_element_color_you_want').css('color'); //gives you the color of the element 
$('element_to_insert_color').html(color); //insert color inside the element text