web-dev-qa-db-fra.com

Définir la propriété de style de l'élément HTML en javascript

J'ai un tas d'anciennes pages classiques ASP, dont beaucoup affichent des données de base de données dans des tableaux. Aucune des pages n'a de fonctionnalité de tri intégrée: vous êtes à la merci de la clause ORDER BY du le développeur d'origine a jugé bon d'utiliser.

Je travaille sur une solution rapide pour virer de bord sur le tri via javascript côté client. J'ai un script déjà écrit qui fait surtout ce dont j'ai besoin. Cependant, je dois encore ajouter un peu de fonctionnalité. Les lignes du tableau dans ces pages auront souvent des couleurs de ligne alternées, et le mécanisme utilisé pour y parvenir varie selon les pages. Cela peut être aussi simple que de changer une classe CSS ou les styles peuvent avoir été rendus en ligne par le code ASP.

À l'heure actuelle, après le tri du tableau, chaque ligne conserve le schéma de coloration avec lequel les lignes alternées ne sont plus alternées. J'espérais le réparer avec quelque chose de simple comme ceci:

/* "table" is a var for the table element I'm sorting.
   I've already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

Malheureusement, vous ne pouvez pas simplement définir la propriété de style d'un élément comme ceci. Il se plaint que l'objet n'a pas de poseur. Sinon, comment puis-je faire cela simplement? Aucun framework comme jQuery n'est autorisé ici - c'est hors de ma portée.

Mise à jour:
Bien que ce soit la meilleure solution, il n'est tout simplement pas pratique de refactoriser plus de 100 pages pour toutes les classes d'utilisation plutôt que le style en ligne. De plus, il y a parfois plus que la couleur d'arrière-plan. Par exemple, une rangée peut être beaucoup plus foncée ou plus claire que la rangée alternée, un style ayant également une couleur de premier plan différente pour s'adapter. Ou un style alterné peut définir des bordures différemment. Je ne sais vraiment pas ce qui est utilisé sur toutes ces pages, j'ai donc besoin de quelque chose qui appliquera de manière générique tous les styles d'une ligne à l'autre.

javascripthtmlstyles
32
Joel Coehoorn

Vous pouvez essayer de saisir les cssText et className.

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

Cependant, je ne suis pas entièrement sûr de la compatibilité du navigateur avec cssText.

40
Jonathan Lonowski

Vous pouvez définir l'attribut style de n'importe quel élément ... l'astuce est que dans IE vous devez le faire différemment. ( bug 245 )

//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);

Notez que dans IE8, en mode Standards, la première méthode fonctionne.

23
scunliffe

Pour moi, cela fonctionne:

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don't care */ }
}
4
Tomalak

Je voudrais noter qu'il est généralement préférable de changer la classe du nœud au lieu de son style et de laisser CSS gérer ce que cela signifie.

2
annakata

L'élément DOM style "propriété" est une collection en lecture seule de tous les attributs de style définis sur l'élément. (La propriété de collection est en lecture seule, pas nécessairement les éléments de la collection.)

Vous feriez mieux d'utiliser la "propriété" className sur les éléments.

2
BlackMael

Ne définissez pas l'objet de style lui-même, définissez la propriété de couleur d'arrière-plan de l'objet de style qui est une propriété de l'élément.

Et oui, même si vous avez dit non, jquery et tablesorter avec son plugin zebra stripe peuvent tout faire pour vous en 3 lignes de code.

Et il serait préférable de simplement définir l'attribut class puisque vous avez alors un contrôle non codé en dur sur le style qui est plus organisé

0
Josh

Si vous souhaitez simplement modifier la couleur de la ligne, vous pouvez simplement accéder à la propriété style.backgroundColor et la définir.

Ici est un lien rapide vers une propriété CSS à la conversion JS.

0
Victor