在javascript垂直轉換期間保持標題中的動態字體顏色

Question

我在 html 表中的 th 標簽中有不同的字體顏色，我確實希望我的函數垂直對齊數據，但是當我將數據轉換為垂直時，我丟失了該字體顏色。

可以從數據庫動態生成 12 個不同的字體標題

小提琴： http : //jsfiddle.net/bthorn/y8ct6b5u/

<table class=mytable>
    <th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size=2> Test this out</font>

    </th>
</table>

筆記：

字體顏色可以是“#FF0000”以外的顏色

可能是#FFFFFF 或#000000 或其他什么......因此我需要捕捉它。

我分叉的某人小提琴：

別人試圖說做

newInnerDiv.css("background-color");

當我說我不想用他們的第一個/第二個答案對代碼進行硬編碼時

newInnerDiv.css("color", "red");

http://jsfiddle.net/bthorn/p1w73oyj/

Answer 1

只需將CSS類添加到包含樣式屬性的表中即可。 根據一般經驗，永遠不要使用HTML屬性（例如color和bgcolor）。 HTML可以告訴瀏覽器顯示什么內容。 如何顯示它（顏色，大小，格式等）是CSS的任務。

這是一個有效的小提琴： https : //jsfiddle.net/gb4pxfx5/1/ 。

請注意，我已經創建了一個名為mytable的CSS類，該類保留了背景和文本的顏色，並且由於該類在進行轉換時保持不變，因此文本的顏色保持不變：

  table.mytable {
       background-color: #C0C0C0;
       color: #FF0000;   
  }

編輯：如果要動態更改樣式，則可以使用jQuery的css（）方法或在預定義的CSS類之間切換。 這是后者的示例，來自https://jsfiddle.net/9f73zmb2/ ：

var changeColor = function()
{
    table.removeClass(curr_class);
    curr_class = curr_class === 'red' ? 'orange' : 'red';
    table.addClass(curr_class);
    window.setTimeout(changeColor, 1000);
}
changeColor();

Answer 2

好的，因此您需要使用querySelector，並且在小提琴中有一個.each循環，因此您將使用“ this”並應用然后將其應用回

var col = this.querySelector('font').color;

newInnerDiv.css("color", col);

我添加了一些額外的TH標頭，因為您說您有不同的顏色

小提琴： http : //jsfiddle.net/stickelt/vkvv2yfm/