Vous ne pouvez pas modifier borderColor de TD

L'utilisation de JS pour définir la couleur d'arrière-plan d'un TD est correcte. Mais, la définition de la couleur de la bordure est problématique dans FF 3.0.18 bien que IE 6 ne rencontre pas cela. FF est problématique en ce sens qu'il nécessite que l'élément TD ait un attribut style initialisé au style bordure: solide. Sans cela, définir la couleur de la bordure d'un TD ne fonctionnera pas. Est-ce un bug connu?Vous ne pouvez pas modifier borderColor de TD

Comment définir la couleur de la bordure sans avoir à définir l'attribut style ainsi que la valeur d'initialisation?

Je connais une autre astuce de définition de l'attribut classe au lieu de définir directement la couleur de la bordure. Est-ce une indication que TD déteste avoir sa couleur de bordure définie de façon dynamique? Est-ce connu aussi bien?

Le code problématique est ci-dessous (le but est de savoir pourquoi le réglage de la couleur de la bordure de simple vérité 1 ne fonctionne pas en vérité simple 3 fonctionne quand j'emploie l'astuce décrite ci-dessus):

<html> 
<head> 
<title>Quirks FF 3.0.18</title> 
<style type="text/css"> 
table { 
    border-collapse: collapse; 
} 
</style> 
<script type="text/javascript"> 
function changeBgColor() 
{ 
    document.getElementById('simple').style.backgroundColor='yellow'; 
    document.getElementById('simple2').style.backgroundColor='yellow'; 
    document.getElementById('simple3').style.backgroundColor='yellow'; 
} 

function quirk(id) 
{ 
    var x = document.getElementById(id); 

    x.style.border = '2px solid red'; 
} 
</script> 
</head> 
<body> 
    <input type="button" onclick="changeBgColor()" value="Change background color"/> 
    <input type="button" onclick="quirk('simple')" value="Change border color 1"/> 
    <input type="button" onclick="quirk('simple2')" value="Change border color 2"/> 
    <input type="button" onclick="quirk('simple3')" value="Change border color 3"/> 
    <table> 
    <tr><td id="simple">Simple truth 1</td></tr> 
    </table> 
    <table> 
    <tr><td><span id="simple2">Simple truth 2</span></td></tr> 
    <table> 
    <tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr> 
    </table> 
</body> 
</html>

Source

2010-03-03 Tadeus Prastowo

Je crois que c'est un bug. Comme vous l'avez déjà indiqué, la solution consiste à définir un style de bordure solide. Vous pouvez l'ajouter à la feuille de style afin que TD soit toujours initialisé:

TD {border-style: solide; }

Source

2010-03-24 00:12:00 Tran

Bien sûr, je crois qu'il est un bug. Mais, est-ce largement connu? Mon googling l'autre jour n'a apporté aucun bon résultat. –

Ce n'est pas un bogue, chaque navigateur décent vous demandera de définir les trois valeurs de bordure - couleur, style (solide, pointillé, etc.) et largeur de pixel. Si un ou plusieurs attributs sont manquants, les résultats peuvent varier.

Vous devez définir les trois attributs dans JS pour afficher correctement la bordure. Cependant, aucune valeur d'initialisation (CSS) n'est requise.

De plus, vous pouvez toujours utiliser le réglage de la frontière attribue séparément via border-width, border-style border-color: http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Source

2010-03-24 00:16:09 dusoft

C'est un bug puisque j'ai défini les trois valeurs dans la fonction JavaScript quirk(): x.style.border = '2px red red'; –

Vous ne pouvez pas modifier borderColor de TD

Répondre

Questions connexes