将css属性值作为文本插入来自jquery的给定div中

Question

我需要一种方法来插入css属性的值＆＃34; color＆＃34;作为div #consola中的文本，分别为3个div中的每一个 - #position，＃position2，＃position3 - 类-p1color，p2color，p3color - 分别作为滚动条进行时的值更改。

＆＃13;

＆＃13;

$(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)',
    })
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用jQuery：

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