-1

JavaScriptには、色を動的に変更する2行のコードがあります。1つはテーブル行の背景色を変更し、もう1つはフォントの色を変更します。

rows[i].style.backgroundColor = 'red'
rows[i].style.color = 'white'

特にハイパーリンクの場合、フォントの色を変更するには、もう1行のコードが必要です。私は試した：

rows[i].style.link.color = 'white'

と他のいくつかのバリエーションがありますが、リンクされたフォントの色を変更することができません。誰かがこれを手伝ってもらえますか？ありがとう。

完全なコード：

var INTENDED_MONTH = 7 //August
// INTENDED_MONTH is zero-relative
now = new Date().getDate(),
rows = document.getElementById('scripture').rows;
if (new Date().getMonth() != INTENDED_MONTH) {
    // need a value here less than 1, or the box for the first of the month will be in Red
    now = 0.5
};
for (var i = 0, rl = rows.length; i < rl; i++) {
    var cells = rows[i].childNodes;
    for (j = 0, cl = cells.length; j < cl; j++) {
        if (cells[j].nodeName == 'TD'
  && cells[j].firstChild.nodeValue != ''
  && cells[j].firstChild.nodeValue == now) {
            rows[i].style.backgroundColor = 'red'
            rows[i].style.color = 'white'
            rows[i].style.a.color = 'white'
            $('html,body').delay(500).animate({ scrollTop: rows[i].offsetTop }, 2000);
        }
    }
}
4

4 に答える 4

0

rows[i].style.a.colorが機能するはずです。：linkは実際のクラスではありません。rows[]とコンテンツを表示すると簡単になります

于 2012-08-27T16:10:26.883 に答える
0

ページに存在するhtml要素として正しいrow[i]があることを確認してください。alert(row[i].id);色を変更する前に、正しい要素があることを確認してください。

document.getElementsByTagName（'ID' + i）.style.color='red';を実行することもできます。

実際には、この種のものにはcssクラスを使用する方が良いでしょう。そして、jqueryと一緒に行うのが最も簡単です。

于 2012-08-27T16:10:44.533 に答える
0

CSSの使用はどうですか？

tr{
   backgorund:red;
   color:white;
}
tr a{
   color:white;
}

JavaScriptが必要な場合は、

var els=rows[i].getElementsByTagName('a');
for(var i=0;i<els.length;i++){
   els[i].style.color = 'white';
}

編集：

使用することもできます

tr a{
   color:inherit;
}

そしてあなたがするとき

rows[i].style.color = 'white'

アンカーの色は行の色と同じになります-白-。

編集2：

コメントで述べたように、JavaScriptでリンクを作成しても、それらはHTML要素であるため、CSSが影響します。

しかし、問題はルールが

table.hovertable a:link, table.hovertable a:visited, table.hovertable a:hover, table.hovertable a:active {
    color: black;
}

オーバーライド

table.hovertable tr a {
    color: inherit;
}

次に、あなたが必要です

table.hovertable tr a:link {
    color: inherit;
}

これにはセレクター:linkがあるため、両方のルールに同じセレクターがあり、最後のルールが有効になります。

inheritしかし、それはIE7以前では機能しないと言うのを忘れていました。次に、あなたは使用することができます

rows[i].className+=' selected';

と

table.hovertable tr.selected{
   color:white;
   background:red;
}

table.hovertable tr.selected a:link{
   color:white
}

Edit3：

今月のセルに同じスタイルを設定したい場合は、

var m=new Date().getMonth();
document.getElementById('months').rows[Math.floor(m/6)].cells[m%6].className+=' selected';

（テーブルにid="months"）があると仮定します

しかしその後

table.hovertable .selected{
   color:white;
   background:red;
}

table.hovertable .selected a:link{
   color:white
}

（.selectedの代わりにtr.selected、今はtd）です。

しかし、あなたはまだを使用しているようcolor:inheritです。不要なクラスを使用してスタイルを設定したので、

于 2012-08-27T16:11:37.747 に答える
0

そのような単純な解決策はないのではないかと思います。リンクは行の子要素であり、一般的なテキストの色には従いません。私の意見で最も簡単な解決策は、行のcssクラスを変更し、そこで色を定義することです。

cssで次のような適切な色のブロックを定義できます。

.redHighlighted { background-color: 'red'; color: 'white'; }
.redHighlighted a, .redHighlighted a:visited,
.redHighlighted a:hover, .redHighlighted a:active { color: 'green'; }

そして、JavaScriptで1行でそれを行うことができます：

rows[i].setAttribute("class", "redHighlighted");

もちろん、後でクラスを削除するか、別のクラスに置き換えることができます。また、CSSの行ではなく、TD要素の色を次のように指定する必要がある場合があることにも注意してください。

.redHighlighted td { background-color: 'red'; color: 'white'; }
于 2012-08-27T16:20:31.773 に答える