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

J'ai un tas de vieux classique des pages ASP, qui sont nombreux à afficher les données de base de données dans les tables. Aucun des pages ont aucune fonctionnalité de tri construit en: vous êtes à la merci de n'importe quel ORDRE PAR la clause développeur à l'origine, a cru bon d'utiliser.

Je suis en train de travailler sur une solution rapide au point d'amure sur le tri via javascript côté client. J'ai un script déjà écrit que la plupart ne ce dont j'ai besoin. Cependant, j'ai encore besoin d'ajouter un peu de fonctionnalité. Les lignes de la table dans ces pages ont souvent de la ligne alternant les couleurs, et le mécanisme utilisé pour réaliser cela varie entre les pages. Il pourrait être aussi simple que de changer une classe CSS ou les styles peuvent avoir été rendu inline par le code ASP.

Dès maintenant, après le tri, chaque ligne conserve le schéma de couleurs est rendu avec et donc l'alternance de lignes n'est plus en alternance. J'espérais à la fixer 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 fixé à un élément de la propriété de style de ce genre. Elle se plaint du fait que l'objet n'a pas de setter. Sinon, comment puis-je faire cela simplement? Pas de frameworks comme jQuery permis ici - c'est hors de mes mains.

Mise à jour:

Alors il serait la meilleure solution, c'est juste pas pratique pour refactoriser 100+ pages pour toutes les classes d'utilisation plutôt que de style en ligne. Aussi, il est parfois plus compliqué que de juste la couleur de fond. Par exemple, une ligne peut être beaucoup plus claire ou plus foncée que la ligne alternance, avec un style différent couleur de premier plan ainsi à accueillir. Ou une alternance de style peut fixer des frontières. Je ne sais vraiment pas ce qui est utilisé sur l'ensemble de ces pages, j'ai donc besoin de quelque chose qui va génériquement appliquer tous des styles à partir d'une ligne à l'autre.

InformationsquelleAutor Joel Coehoorn | 2008-12-05

40

Vous pouvez essayer de saisir le 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;
    }
```
Pas entièrement sûr de la compatibilité du navigateur avec cssText, si.
- Semble bon: d'après cette page, il devrait être compatible: quirksmode.org/dom/w3c_css.html Vous aurez un upvote à cela, et peut-être accepté de répondre, mais je vais attendre un peu, de sorte que la question reste sur la réponse de vue un peu plus longtemps.
- Simple et efficace. +1 (j'étais pas au courant de la cssText bien, c'est très utile, merci!)
- Qui est à portée de main. Moi aussi j'ai été anaware de cssText.
InformationsquelleAutor Jonathan Lonowski
22

Vous pouvez définir l'attribut style de l'élément... le truc, c'est que dans IE que vous avez à faire les choses différemment. (bug 245)
```
//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);
```
Noter que dans IE8, en Mode standard, la première méthode ne fonctionne pas.
- Bien que cela fonctionne, il remplace toute précédente styles de jeu sur DOMElement. Si la nécessité de préserver les vieux styles, l'utilisation de DOMElement.style est recommandé.
InformationsquelleAutor 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 */ }
}

InformationsquelleAutor Tomalak

2

Je tiens à noter qu'il est généralement préférable de changer le classe de le noeud à la place de son style et de laisser CSS poignée de ce que cela signifie.
- -1 sur le css fiendly classe changeurs je vois. (soupir)
- Ce n'est pas à l'aide de classes qui obtient le -1. C'est que la question mentionnée beaucoup de anciennes pages qui ont déjà des styles en ligne. Évidemment, pour le nouveau travail de la classe est préférable.
- ne peut pas croire que je suis -3 pour cette
InformationsquelleAutor annakata
2

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

Vous serait mieux d'utiliser le nom de classe "propriété" sur les éléments.

InformationsquelleAutor BlackMael
0

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

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

Et la seule définition de l'attribut de classe serait mieux depuis que vous avez de la non-codée en dur de contrôle sur le style qui est plus organisé
- Parfois, il est plus que juste la couleur de fond ou une classe unique.
- Vous ne pouvez définir une propriété dans un état unique, si vous êtes en évitant de classe. Fondamentalement étendre que j'ai proposé et défini le X vous souhaitez modifier les propriétés. Il y a beaucoup de problèmes de conformité, mais généralement juste un style.backgroundColor et de style.foregroundColor
InformationsquelleAutor Josh
0

Si vous voulez juste changer la couleur de la ligne, vous pouviez accéder au style.propriété backgroundColor et la définir.

Ici est un lien rapide pour une propriété CSS JS conversion.

InformationsquelleAutor Victor

Vous devez vous connecter pour publier un commentaire.