JavaScript からスタイル プロパティを取得する JavaScript で CSS スタイルを扱う場合、this.style[property] が空の文字列。 理解this.style[property] this.style[property] は、現在の要素のインライン スタイルにアクセスします。インライン スタイルは、 内で直接定義されるスタイルです。 </p> <p><strong>シナリオ例</strong></p> <p>次のコードを考えてみましょう:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function css(prop, value) { if (value == null) { return this.style[prop]; } if (prop) { this.style[prop] = value; } return true; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この関数を使用すると、取得または設定できます。 element.css(property, value) を使用した要素の CSS プロパティ。</p> <p>ただし、次の例の高さなど、インラインで設定されていないプロパティを取得しようとすると、</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const element = document.getElementById('test'); const height = element.css('height'); // Returns ""</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この場合、高さはインラインとして定義されていないため、空の文字列が返されます。 style.</p> <p><strong>解決策</strong></p> <p>外部スタイルシートで定義されている CSS プロパティにアクセスするには、またはクラスを使用すると、getComputedStyle() 関数を使用できます。この関数は、要素の計算されたスタイルを取得します。これには、要素に適用されているすべてのスタイルが含まれます。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const element = document.getElementById('test'); const height = getComputedStyle(element).height; // Returns "100px"</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>提供した更新コードでは、getComputedStyle() を使用して計算されたスタイルを取得することで CSS 関数を修正しました。要素の:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function css(prop, value) { // Code to get or set CSS properties if (value == null) { var b = (window.navigator.userAgent).toLowerCase(); var s; if (/msie|opera/.test(b)) { s = this.currentStyle; } else if (/gecko/.test(b)) { s = document.defaultView.getComputedStyle(this, null); } if (s[prop] != undefined) { return s[prop]; } return this.style[prop]; } // Code to continue with your logic }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この更新された関数を使用すると、外部スタイルシートで定義されている CSS プロパティを正しく取得できるようになりました。インライン スタイルとして設定されていない場合でも、クラスを使用します。</p>
![Why Does `this.style[property]` Sometimes Return an Empty String When Getting CSS Properties in JavaScript?](https://img.php.cn/upload/article/000/000/000/173348059619151.jpg)
