J'utilise window.getComputedStyle() pour obtenir des valeurs CSS pour les propriétés:

  • borderRadius
  • style de bordure
  • largeur de la bordure
  • couleur de la bordure

J'ai remarqué que la dernière FF renvoie des chaînes vides, Chrome renvoie à la place des valeurs calculées avec également des unités:

FF:

"borderRadius":"","borderStyle":"","borderWidth":"","borderColor":""

Chrome:

"borderRadius":"0px","borderStyle":"none","borderWidth":"0px","borderColor":"rgb(0, 0, 0)"}

J'aimerais savoir:

  • Cet écart est-il causé par un bogue connu?
  • Connaissez-vous un moyen de forcer FF à renvoyer des valeurs sous forme de Chrome? (Je suis conscient que je peux ajouter des valeurs par défaut avec certaines conditions, mais je voudrais utiliser une solution native si possible).
    (function (window) {
        document.addEventListener('DOMContentLoaded', (event) => {
            let elmTarget = document.querySelector('#target'),
                elmResult = document.querySelector('#result');

            let styles = window.getComputedStyle(elmTarget),
                result = {
                    borderRadius: styles.borderRadius,
                    borderStyle: styles.borderStyle,
                    borderWidth: styles.borderWidth,
                    borderColor: styles.borderColor
                },
                resultStr = JSON.stringify(result);
            console.log(resultStr);
            elmResult.innerHTML = resultStr;
        });
    })(window);
        #target {
            background-color: blue;
            width: 100px;
            height: 50px;
        }
    <div id="target"></div>
    <div id="result"></div>
1
GibboK 17 janv. 2017 à 14:33

2 réponses

Meilleure réponse

Shorthands.

Dans FF, vous devez tout obtenir séparément.

border-left-style
border-top-style
border-bottom-style
border-right-style

border-left-width
...

Avec border-radius étant encore plus long:

border-top-left-radius
border-top-right-radius
...
(function(window) {
  document.addEventListener('DOMContentLoaded', (event) => {
    let elmTarget = document.querySelector('#target'),
      elmResult = document.querySelector('#result');

    let styles = window.getComputedStyle(elmTarget),
      result = {
        borderTopLeftRadius: styles.borderTopLeftRadius,
        borderTopRightRadius: styles.borderTopRightRadius,
        borderBottomLeftRadius: styles.borderBottomLeftRadius,
        borderBottomRightRadius: styles.borderBottomRightRadius,

        borderLeftStyle: styles.borderLeftStyle,
        borderTopStyle: styles.borderTopStyle,
        borderBottomStyle: styles.borderBottomStyle,
        borderRightStyle: styles.borderRightStyle,

        borderLeftWidth: styles.borderLeftWidth,
        borderTopWidth: styles.borderTopWidth,
        borderRightWidth: styles.borderRightWidth,
        borderBottomWidth: styles.borderBottomWidth,

        borderLeftColor: styles.borderLeftColor,
        borderTopColor: styles.borderTopColor,
        borderBottomColor: styles.borderBottomColor,
        borderRightColor: styles.borderRightColor,
      },
      resultStr = JSON.stringify(result);
    console.log(resultStr);
    elmResult.innerHTML = resultStr;
  });
})(window);
#target {
  background-color: blue;
  width: 100px;
  height: 50px;
}
<div id="target"></div>
<div id="result"></div>
2
Kaiido 17 janv. 2017 à 11:53

Les raisons pour lesquelles getComputedStyle() renvoie des chaînes vides sur FF et non dans Chrome semblent liées à une spécification manquante que Chrome implémente à la place. Plus d'informations sur le lien ci-dessous:

https://bugzilla.mozilla.org/show_bug.cgi?id=137688

0
GibboK 17 janv. 2017 à 12:47