JSコンソール出力が空白で、スタイルの変更が無効である理由は何ですか？それを解決する方法は？

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

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

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

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

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

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

このコードは、最初にgetComputedStyle()を使用して、 sidebarright要素のtop属性値を取得し、数字に変換し、新しいtop値を計算し、最後にそれを要素のstyle.top属性に割り当てます。

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

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

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

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

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

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

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

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