D'accord, disons que nous créons un élément DOM :

let element = document.createElement('div');

Maintenant, si je veux appliquer des styles dessus, on peut dire :

element.style = 'display: inline-block; width: 50%; height: 100px; background: #f00;';

On peut aussi dire ceci :

elemenet.style.display = 'inline-block';
elemenet.style.width = '50%';
elemenet.style.height = '100px';
elemenet.style.background = '#f00';

Cette approche est beaucoup trop répétitive car vous devez toujours dire element.style., lorsque vous appliquez plusieurs styles.

Dans une syntaxe de type jQuery, nous pouvons appliquer un objet de paires clé-valeur dans la méthode $.css() de jQuery, comme ceci :

$(element).css({
    display: 'inline-block',
    width: '50px',
    height: '100px',
    background: '#f00'
});

Cela étant dit, nous pouvons dire ce qui suit :

let styles = {
    display: 'inline-block',
    width: '50px',
    height: '100px',
    background: '#f00'
};

for(let property in styles) {
    if(styles.hasOwnProperty(property)) {
        element.style[property] = styles[property];
    }
}

Cela appliquera tous les styles du element. Je pourrais même écrire une fonction, disons applyCSS(element, styles) et faire la même chose que ci-dessus.

Mais, dans le dernier cas, si nous procédons comme suit :

element.style = {
    display: 'inline-block',
    width: '50px',
    height: '100px',
    background: '#f00'
};

Cela ne volera pas du tout. Cela ne fonctionnera pas du tout et aucun style ne sera appliqué à l'élément.

Ma question est la suivante : comment appliquer correctement les paires clé-valeur pour style dans DOM ?

0
Zlatan Omerović 15 mars 2019 à 12:58

2 réponses

Meilleure réponse

Vous pouvez toujours jouer avec le prototype CSSStyleDeclaration pour ajouter votre fonction. Mais je ne ferais pas cela sans être extrêmement prudent et ajouter beaucoup de vérifications que je n'ai pas faites ici.

Un exemple:

CSSStyleDeclaration.prototype.setStyles = function(styles){
  for(let property in styles) {
      if(styles.hasOwnProperty(property) && property in this) {
          this[property] = styles[property];
      }else{
          console.error('no property ' + property);
      }
  }
};

document.body.style.setStyles({
  color: 'red',
  foo: 'bar',
});
<span>text</span>

EDIT a changé CSS2Properties en CSSStyleDeclaration

EDIT2 Ajout d'autres possibilités

Vous pouvez également étendre le prototype HTMLElement, comme ceci :

HTMLElement.prototype.setStyles = function(styles){
  for(let property in styles) {
      if(styles.hasOwnProperty(property) && property in this.style) {
          this.style[property] = styles[property];
      }else{
          console.error('no property ' + property);
      }
  }
};

document.body.setStyles({
  color: 'red',
  foo: 'bar',
});
<span>text</span>

Mais le moyen le plus sûr serait d'utiliser votre propre classe d'éléments HTML, un peu comme le fait jQuery, et de ne pas jouer avec les prototypes d'objets importants :

function myHTMLElement(selection){
  //you can use this function as a selector like jQuery, testing the type of "selection" is a string and use querySelector
  
  var construct = function(selection){
    this._element = selection;
  };
  //defining it on prototype means all instances will use same function
  construct.prototype.setStyles = function(styles){
    if(this._element && this._element.style){
      for(let property in styles) {
          if(styles.hasOwnProperty(property) && property in this._element.style) {
              this._element.style[property] = styles[property];
          }else{
              console.error('no property ' + property);
          }
      }
    }
    return this;
  };
  
  return new construct(selection);
};

myHTMLElement(document.body).setStyles({
  color: 'red',
  foo: 'bar',
});
<span>text</span>
2
Kaddath 15 mars 2019 à 13:16

Probablement avec la propriété de style traitée comme un objet, cela ne vous a pas permis d'attribuer une valeur à la propriété.

Cependant, avec element.attributes['style'].value, cela semble fonctionner.

Exactement comme ci-dessous :

element.style = ''; //add the missing attribute
element.attributes['style'].value = 'display: inline-block; width: 50%; height: 100px; background: #f00;';

Notez que l'attribut style est manquant pour l'élément nouvellement créé.

J'espère que cela t'aides.

0
user2648008 15 mars 2019 à 10:44