JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストの色を取得・設定する方法

はじめに

JavaScriptでテキストの色を取得・設定するには、styleオブジェクトのcolorプロパティを使用します。このプロパティを参照すれば現在適用されている文字色の値を読み取ることができ、値を代入すればテキストの色を動的に変更することも可能です。

基本的な使い方

document.getElementById()などのメソッドで対象の要素を取得し、その要素のstyle.colorにアクセスします。戻り値は、インラインスタイルに設定された色の文字列（例："green"、"rgb(0, 128, 0)"など）です。

サンプルコード

以下のコードを実行し、ボタンをクリックすると、テキストに設定されている色がアラートで表示されます。

<!DOCTYPE html>
<html>
   <body>
      <h2>見出し2</h2>
      <p id="myId" style="color:green;">デモテキスト</p>
      <br>
      <button type="button" onclick="display()">色を取得する</button>
      <script>
         function display() {
            alert(document.getElementById("myId").style.color);
         }
      </script>
   </body>
</html>

コードの解説

この例では、id「myId」が付いた段落に緑色（green）がインラインスタイルとして設定されています。ボタンをクリックするとdisplay()関数が実行され、style.colorプロパティによって色の値「green」が取得され、アラートダイアログに表示されます。

注意点：外部CSSで設定された色の取得

style.colorで取得できるのは、HTML要素に直接記述されたインラインスタイルの値のみです。外部スタイルシートや<style>タグで設定された色を取得したい場合は、window.getComputedStyle()メソッドを使用します。

const color = window.getComputedStyle(document.getElementById("myId")).color;
console.log(color); // 例: rgb(0, 128, 0)

このように使い分けることで、どのように色が指定されていても確実にテキストの色を取得できるようになります。

  1. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>