Native JS ruft HTML-Stile ab und ändert sie-HTML-Tutorial-php.cn

Native JS ruft HTML-Stile ab und ändert sie

高洛峰

Freigeben： 2017-02-13 15:16:19

Original

1684 Leute haben es durchsucht

Jeder weiß, dass es im tatsächlichen Betrieb relativ häufig vorkommt, den Stil eines Elements zu erhalten. Ich hoffe, dass es einigen Menschen in Not helfen kann Wenn Sie Glück haben und jemand einen besseren Weg sieht, können Sie ihn gerne vorschlagen! ! !

1. Holen Sie sich den Inline-Elementstil:

<!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>

Nach dem Login kopieren

Im JS-Code zeigt die Warnung die Breite des div-Elements als 200 Pixel an; wird erreicht, aber das ist einfach. Die Methode eignet sich nur zum Erhalten des Inline-Elementstils des Elements und kann nicht den internen Stil und den externen Stil erhalten. Im Projekt wird die Lösung des Schreibens von Inline-Elementen nicht von allen erkannt Die Methode ist einfach für jeden verständlich.

2. Abrufen von Nicht-Interline-Stilelementen:

Wenn der Elementstil kein Interline-Stil ist, kann die obige Methode nicht verwendet werden, um den Stil des Elements zu erhalten. Sie müssen eine andere Methode verwenden :

<!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>

Nach dem Login kopieren

Im obigen Code wird window.getComputedStyle('Element',null).'Style' verwendet. Die Kompatibilität dieser Methode: Firefox und Google IE9 erhalten den berechneten Stil, aber Sie benötigen Hier ist zu beachten. Der mit dieser Methode erhaltene Wert befindet sich im schreibgeschützten Modus und kann daher nicht geändert werden, um seine Eigenschaften zu ändern. Hier müssen Sie auf die Schreibmethode achten 🎜> 3. Kompatibilität:

Die unausgesprochene Regel im vorherigen Absatz ist, dass nicht alle guten Dinge universell sein können. Ja, Sie haben es richtig erraten. Der mutwillige IE kann die oben genannte Methode nicht verwenden, aber der IE hat seine eigene Methode namens currentStyle. Die Verwendung ist dieselbe, daher werde ich unten nicht noch einmal auf Details eingehen. Schreiben Sie den verarbeiteten und kompatiblen Code direkt wie folgt:

Native JS ruft den HTML-Stil ab und ändert ihn

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];
    }
}

Nach dem Login kopieren

Für mehr natives JS, um den HTML-Stil zu erhalten und ihn zu ändern, achten Sie bitte auf die chinesische PHP-Website!