ラベルから変数javascriptにテキストの色を渡します。

Question

私はいくつかの行のテーブルを持っており、各行にテキストを変更してテキストを変更すると、テキストの色が変わります。 変数にそのテキストの色を渡したいと思います。

どのようにしてテキストの色を変数に渡すことができますか？

var cor = document.getElementById('conteudo_pagina_quantidade' + i).style.color; 

Answer 1

あなたはすべてのテキストボックスにイベントリスナーを追加し、その値をとり、その値に色を変更します。

for (var i=1; i<=3; i++) { 
 
    var cor = document.getElementById('conteudo_pagina_quantidade' + i); 
 
    cor.addEventListener('keyup', function(){ // to make it live, changes on every key stroke 
 
    var val = this.value; // take the value 
 
    this.style.color = val; // change the color with value 
 
    }); 
 
}

<input id="conteudo_pagina_quantidade1" placeholder="Color..."> 
 
<input id="conteudo_pagina_quantidade2" placeholder="Color..."> 
 
<input id="conteudo_pagina_quantidade3" placeholder="Color...">

Answer 2

あなたがライン

var cor = document.getElementById('conteudo_pagina_quantidade' + i).style.color; 

作品期待通りにことを見るように。入力テキストボックスのcolorが表示されます。

for(var i=1; i<=3; i++){ 
 
    var cor = document.getElementById('conteudo_pagina_quantidade' + i).style.color; 
 
    console.log(cor); 
 
}

<input type='text' id='conteudo_pagina_quantidade1' style='color:red;'/> 
 
<input type='text' id='conteudo_pagina_quantidade2' style='color:green;'/> 
 
<input type='text' id='conteudo_pagina_quantidade3' style='color:blue;'/>

Answer 3

をあなたは要素の計算されたスタイルを回復するためにwindow.getComputedStyleを使用する必要があります。

const el = document.getElementById('conteudo_pagina_quantidade' + i); 
const clr = window.getComputedStyle(el).getPropertyValue("color");