Native JS récupère les styles HTML et les modifie-tutoriel HTML-php.cn

Native JS récupère les styles HTML et les modifie

高洛峰

Libérer： 2017-02-13 15:16:19

original

1684 Les gens l'ont consulté

Tout le monde sait qu'obtenir le style d'un élément en fonctionnement natif JavaScript est une chose relativement courante en fonctionnement réel. Ici, j'aimerais vous présenter la méthode pour obtenir le style CSS. J'espère que cela pourra aider certaines personnes dans le besoin. . Si vous avez de la chance, si quelqu'un voit une meilleure solution, n'hésitez pas à la suggérer ! ! !

1. Obtenez le style de l'élément en ligne :

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>js获取外部样式</title></head><body>
    <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div></body><script>
    //获取行间样式
    var div = document.getElementById(‘div‘);    var width = div.style.width;
    alert(width);//200px</script></html>

Copier après la connexion

Dans le code JS, l'alerte affichera la largeur de l'élément div à 200 px ; est obtenu, mais c'est simple. La méthode ne convient que pour obtenir le style d'élément en ligne de l'élément, et ne peut pas obtenir le style interne et le style externe. Dans le projet, la solution d'écriture d'éléments en ligne n'est pas reconnue par tout le monde, donc ceci. la méthode est juste pour que tout le monde puisse la comprendre.

2. Obtention d'éléments de style non interligne :

Si le style de l'élément n'est pas un style interligne, la méthode ci-dessus ne peut pas être utilisée pour obtenir le style de l'élément. Vous devez utiliser une autre méthode. :

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>js获取内部部样式</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            border:3px solid cyan;
        }
    </style></head><body>
    <div id="div""></div></body><script>
    var div = document.getElementById(‘div‘);    //获取div的width
    var width = window.getComputedStyle(div,null).width;
    alert(width);//200px
    //修改div的width    div.style.cssText=‘width:300px;‘</script></html>

Copier après la connexion

Dans le code ci-dessus, window.getComputedStyle('Element',null).'Style' est utilisé La compatibilité de cette méthode : Firefox et Google IE9 obtiennent le style calculé, mais vous en avez besoin. faire attention ici. La valeur obtenue par cette méthode est en mode lecture seule et ne peut pas être modifiée, donc la méthode style.cssText est utilisée pour modifier ses propriétés. Ici, vous devez faire attention à la méthode d'écriture

<. 🎜> 3. Compatibilité :

La règle tacite du paragraphe précédent est que toutes les bonnes choses ne peuvent pas être universelles. Oui, vous l'avez bien deviné. L'IE volontaire ne peut pas utiliser la méthode ci-dessus, mais l'IE a sa propre méthode. appelé currentStyle. L'utilisation est la même, donc je n'entrerai pas dans les détails ci-dessous. Écrivez directement le code traité et compatible comme suit :

var div = document.getElementById(‘div‘);if (div.currentStyle) {
    console.log(div.currentStyle.width);
}else{
　　console.log(getComputedStyle(div,null).width);
}

方法封装:
function getStyle(obj,name){    if (obj.currentStyle) {        return obj.currentStyle[name];
    }else{        return getComputedStyle(obj,false)[name];
    }
}

Copier après la connexion

Native JS récupère le style HTML et le modifie

Pour que plus de JS natif obtienne le style HTML et le modifie. Pour les articles connexes, veuillez faire attention au site Web PHP chinois !