HTMLのテキストの色を動的に調整するJavaScriptのスニペット

5637 ワード
css frontend javascript webdev テキストリンク
プレースホルダテキストを使用してHTMLフォームを使用する場合は、選択ドロップダウンは常に入力フィールドのプレースホルダテキストより暗いフォント色を持つことに気づくでしょう.この単純なJavaScriptのスニペットを使用すると、動的に通常のテキストフィールドのように動作するように変更の選択ドロップダウンを色することができます.

この純粋なJavaScriptコードは何ですか?
// Make sure your DOM is loaded
document.addEventListener("DOMContentLoaded",function(){

  // Find all select elements in the current DOM
  const selects = document.querySelectorAll('select');

  // Loop through all select elements
  selects.forEach((elem, i) => {
    // Add the class to make it look like a placeholder text
    elem.classList.add('text-muted');
    // Event listener to remove the class after selecting
    elem.addEventListener('change',function(e){
      // Remove the class to make it look normal (darker)
      elem.classList.remove('text-muted');
    });
  });

});

ここでは、作業例

追加コードなしで同じコードを使用する
もちろん、別のCSSクラスなしで同じJavaScriptコードを使用できます.次の例を見てください.
// Make sure your DOM is loaded
document.addEventListener("DOMContentLoaded",function(){

  // Find all select elements in the current DOM
  const selects = document.querySelectorAll('select');

  // Loop through all select elements
  selects.forEach((elem, i) => {
    // Change the style attribute to lighten the text color
    elem.style.color = '#666';
    // Event listener to change the style of the element
    elem.addEventListener('change',function(e){
      // Change the style attribute to darken the text color
      elem.style.color = '#333';
    });
  });

});

それは簡単でした!
閉じるこの動画はお気に入りから削除されています.お気軽にあなたのプロジェクトのためにそれを使用する.あなたが改善または更なる考えのためにどんな提案をするならば、私にコメントを書いてください.
レスポンスデータストリーム
Androidプログラム情報取得