JavaScriptコンソール出力の故障とスタイルの変更のトラブルシューティングと解決

JavaScriptコードでは、要素のtop屬性値を変更しようとすると、コンソール出力は空白であり、通常、要素スタイルにアクセスして変更する方法が間違っているためです。問題は、 element.style.topを使用して、CSSスタイルシートで定義されているスタイルを操作することです。 element.style.top 、要素のインラインスタイルにのみ動作し、外部スタイルシートまたは內(nèi)部スタイルシートを介して設(shè)定されたスタイルを変更することはできません。

たとえば、 .sidebar_right ul要素のtop屬性がCSS styleSheetを介して定義されている場合、 sidebarright.style.top空の文字列を返します。スタイルを正しく変更するには、次の2つの方法を使用することをお勧めします。

方法1： window.getComputedStyle()を使用して、計算されたスタイルを取得します

window.getComputedStyle()メソッドは、インラインスタイル、外部スタイルのシート、內(nèi)部スタイルのシートのスタイルなど、要素の最終的な計算スタイルを取得できます。それを使用して、要素のtopを取得し、次を変更できます。

 const sidebarright = document.queryselector（'。sidebar_rightul '）;
const closebtn = document.getElementById（ 'closebtn'）; // closebtnがclosebtn.onclick = function（）{を定義していることを確認(rèn)してください
  // ...他のコード...
  const ComputedStyle = window.getComputedStyle（SideBarright）;
  topvalue = parseint（computedstyle.getPropertyValue（ 'TOP'）、10）; //文字列を數(shù)値に変換し、newtop = topvalue -80をredix ledixとして指定します。
  sidebarright.style.top = `$ {newtop} px`;
};

このコードは、最初にgetComputedStyle()を使用して、 sidebarright要素のtop屬性値を取得し、數(shù)字に変換し、新しいtop値を計算し、最後にそれを要素のstyle.top屬性に割り當(dāng)てます。

方法2：CSSクラス名を使用してスタイルを制御します

より簡潔でエレガントな方法は、CSSスタイルシートの新しいクラスを、 .movedなどの新しいクラスを、移動後の狀態(tài)を表現(xiàn)することです。

 .Moved {
  トップ：180px; /*またはその他の必要な値*/
}

次に、JavaScriptコードで、クラス名を追加または削除することにより、要素のスタイルを制御します。

 const sidebarright = document.queryselector（'。sidebar_rightul '）;
const closebtn = document.getElementById（ 'closebtn'）; // closebtnがclosebtn.onclick = function（）{を定義していることを確認(rèn)してください
  // ...他のコード...
  sidebarright.classlist.add（ 'med'）;
};

この方法は、CSSクラス名を介してスタイルを管理し、維持と拡張を容易にします。

重要なヒント： topAd 、 locationItem 、 myJD 、 closebtn 、 closeBtn 、その他の変數(shù)などの変數(shù)が、 onclick関數(shù)の範(fàn)囲內(nèi)で正しく定義され、初期化されていることを確認(rèn)してください。コード內(nèi)の変數(shù)の命名は一貫しておらず、命名仕様を統(tǒng)一することをお勧めします。 constを使用するか、変數(shù)を宣言しlet 、コードの読みやすさと保守性を向上させます。テンプレートリテラル${}を使用して文字列を構(gòu)築して、コードをより簡潔にします。要素が存在するかどうかを確認(rèn)するなど、エラー処理メカニズムを追加します。

以上がJSコンソール出力が空白で、スタイルの変更が無効である理由は何ですか？それを解決する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。