4

本当に問題がある

任意のCSSカラーまたはクラスで定義されたカラーからカラー値を返す関数を記述します

初期処方

私の関数にパラメーターで渡された文字列が色であるかどうかを知りたいです-それだけに答えるのはすでに素晴らしいでしょう-そしてその16進値を知りたいです。

#fffそのため、文字列がまたはのようなものであるかどうかを確認するために正規表現を定義しましたが、やrgb(0,0,0)などのCSS標準色をキャッチしません。各色の名前をテストする必要がありますか、それともそれを行う方法や既存の機能はありますか？ありがとう。blackwhite

個人的に使用するソリューション

  • 「.myClass」などのドットの前に付けられたクラス名が必要な場合
function getColor(classOrColor) {
    if(classOrColor[0] === '.') {
      var temp = $('<div id="temp" style="display:none;" class="'+ classOrColor.split('.').join(' ') + '"/>').appendTo('body');
      var color = temp.css('color');
      temp.remove();
      return color;
    } else {
      return classOrColor;
    }
  }

使用例：

getColor('yellow')
getColor('#abc')
getColor('rgb(1,2,3)')
getColor('.myClass .myOtherClass')

mplungjanの回答に基づくソリューション

  • 「myClass」などのプレーンなクラス名が必要な場合

この回答を使用して、この名前のクラスが存在するかどうかを検索します：https：//stackoverflow.com/questions/983586 / ...

次に、同じ関数を呼び出します（わずかな変更を加えて）

function getColor(classOrColor) {
    if(classExists(classOrColor)) {
      var temp = $('<div id="temp" style="display:none;" class="'+ classOrColor + '"/>').appendTo('body');
      var color = temp.css('color');
      temp.remove();
      return color;
    } else {
      return classOrColor;
    }
  }

使用例：

getColor('#abc')
getColor('myClass')
4

1 に答える 1

4

getComputedStyleを使用できます - これは IE8 以下では機能しません。

色名を 16 進コードに変換する Javascript 関数への回答を参照してください(私が書いた後に見ました)。

デモ

function getRGB(str){
    var elem = document.createElement("div");
    elem.style.display="none";
    elem.style.color=str;
    document.body.appendChild(elem);
    return  window.getComputedStyle(elem,null).getPropertyValue("color");
  }
alert(getRGB("red"));
于 2013-02-04T10:10:37.240 に答える