ネイティブ JS は HTML スタイルを取得して変更します-htmlチュートリアル-php.cn

ネイティブ JS は HTML スタイルを取得して変更します

高洛峰

リリース： 2017-02-13 15:16:19

オリジナル

1705 人が閲覧しました

JavaScript のネイティブ操作で要素のスタイルを取得することは、実際の操作では比較的一般的なことであることは誰もが知っています。ここでは、CSS スタイルを取得する方法を紹介したいと思います。もっと良い方法を見つけたら、ぜひ提案してください。！！

1. インライン要素のスタイルを取得します:

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

ログイン後にコピー

JS コードでは、アラートは div 要素の幅を 200px としてポップアップ表示しますが、この単純な方法はのみに適しています。要素のインライン要素を取得する場合 Styles では内部スタイルと外部スタイルを取得することはできません。プロジェクトではインライン要素の記述は誰もが認識するものではないため、この方法は誰でも理解できるようにするためのものです。

2. 非インターラインスタイル要素を取得する:

要素のスタイルがインターラインスタイルでない場合は、別のメソッドを使用する必要があります:

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

ログイン後にコピー

上記のコードでは、 window を使用します。 .getComputedStyle('Element',null).'Style'、このメソッドの互換性: Firefox および Google IE9 は計算されたスタイルを取得しますが、このメソッドで取得された値は読み取り専用モードであり、変更できないことに注意してください。ですので、style.cssText メソッドを使用してその属性を変更しました。ここでの記述方法に注意する必要があります。

3. 互換性: 前の段落の暗黙のルールは、はい、すべての良いものは普遍的ではないということです。ご想像のとおり、willful IE は上記のメソッドを使用できませんが、IE には currentStyle という独自のメソッドがあります。使用方法は同じなので、詳細は説明しません。処理され、互換性のあるコードがすぐ下に書かれています。 :

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

ログイン後にコピー

ネイティブ JS が HTML スタイルを取得して変更します

ネイティブ JS が HTML スタイルを取得して変更する方法については、PHP 中国語 Web サイトの関連記事に注目してください。