8

javascript を使用して、テキスト入力の値に基づいて、背景色とテキストを同時に変更する関数を作成します。背景色を変更する必要がありますが、テキストも機能させることができません。

function changeBackground() {
    // The working function for changing background color.
    document.bgColor = document.getElementById("color").value;

    // The code I'd like to use for changing the text simultaneously - however it does not work.
    document.getElementById("coltext").style.color = document.getElementById("color").value;
}

上記のコードを見るdocument.getElementById("coltext").style.color = xと、「色」の値ではなく実際の色を入力すると、テキストのコードが機能します。

これは私が参照している html です (私はそれが恐ろしく最適化されていることを知っていますが、それは進行中の作業です):

<form id="TheForm" style="margin-left:396px;">
    <input id="color" type="text" onchange="changeBackground();" />
    <br/><input id="submitColor" value="Submit" type="button" onclick="changeBackground();" style="margin-left:48px; margin-top:5px;" />
</form>

<span id="coltext">This text should have the same color as you put in the text box</span>

明らかに、残念ながら、この方法でコードを使用することはできません。しかし、どんなに頑張っても、それを超えると、一種の無限の複雑さに到達します。これを解決するのは簡単な方法ですよね？

4

3 に答える 3

9

あなたの質問のコードは少し混乱しているように見えるので、あなたがやろうとしていることの例を挙げます。

最初の考慮事項は、HTML、Javascript、および CSS の混合についてです。

HTMLでonClick()を使用するのが悪い習慣なのはなぜですか?

邪魔にならない Javascript

インライン スタイルとクラス

インライン コンテンツを削除し、これらを適切なファイルに分割します。

次に、「クリック」イベントと「変更」イベントのディスプローゼについて説明します。両方が必要かどうかが明確ではないためです。

関数changeBackgroundは背景色とテキスト色の両方を同じ値に設定します (テキストは表示されません)。そのため、DOM で 2 回検索する必要がないため、色の値をキャッシュしています。

CSS

#TheForm {
    margin-left: 396px;
}
#submitColor {
    margin-left: 48px;
    margin-top: 5px;
}

HTML

<form id="TheForm">
    <input id="color" type="text" />
    <br/>
    <input id="submitColor" value="Submit" type="button" />
</form>
<span id="coltext">This text should have the same color as you put in the text box</span>

Javascript

function changeBackground() {
    var color = document.getElementById("color").value; // cached

    // The working function for changing background color.
    document.bgColor = color;

    // The code I'd like to use for changing the text simultaneously - however it does not work.
    document.getElementById("coltext").style.color = color;
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

jsfiddleについて

出典: w3schools

色の値

CSS の色は、赤、緑、青の色の値 (RGB) の組み合わせを表す 16 進数 (hex) 表記を使用して定義されます。光源の 1 つに指定できる最小値は 0 (16 進数 00) です。最大値は 255 (16 進数の FF) です。

16 進値は、# 記号で始まる 3 つの 2 桁の数字として書き込まれます。

更新：@Ianが指摘したように

16 進数の長さは 3 文字または 6 文字です

出典: W3C

色の数値

16 進表記の RGB 値の形式は、「#」の直後に 3 つまたは 6 つの 16 進文字が続く形式です。3 桁の RGB 表記 (#rgb) は、ゼロを追加するのではなく、数字を複製することによって 6 桁の形式 (#rrggbb) に変換されます。たとえば、#fb0 は #ffbb00 に展開されます。これにより、短い表記法 (#fff) で白 (#ffffff) を指定できるようになり、ディスプレイの色深度への依存がなくなります。

入力が有効な CSS Hex Color であることを確認する代替関数を次に示します。テキストの色のみを設定するか、有効でない場合はアラートをスローします。

正規表現のテストには、このパターンを使用します

/^#(?:[0-9a-f]{3}){1,2}$/i

ただし、正規表現マッチングで数値をグループに分割したい場合は、別のパターンが必要になります

function changeBackground() {
    var color = document.getElementById("color").value.trim(),
        rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i;

    if (rxValidHex.test(color)) {
        document.getElementById("coltext").style.color = color;
    } else {
        alert("Invalid CSS Hex Color");
    }
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

jsfiddleについて

これは、名前と 16 進数による色を許可するさらなる変更です。

function changeBackground() {
    var names = ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"],
        color = document.getElementById("color").value.trim(),
        rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i,
        formattedName = color.charAt(0).toUpperCase() + color.slice(1).toLowerCase();

    if (names.indexOf(formattedName) !== -1 || rxValidHex.test(color)) {
        document.getElementById("coltext").style.color = color;
    } else {
        alert("Invalid CSS Color");
    }
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

jsfiddleについて

于 2013-05-18T15:23:48.800 に答える
3

実際に使用するイベント ( textbox change、または button click) に応じて、これを試すことができます。

HTML:

<input id="color" type="text" onchange="changeBackground(this);" />
<br />
<span id="coltext">This text should have the same color as you put in the text box</span>

JS:

function changeBackground(obj) {
    document.getElementById("coltext").style.color = obj.value;
}

デモ: http://jsfiddle.net/6pLUh/

ボタンの小さな問題の 1 つは、それがフォーム内の送信ボタンだったことです。クリックすると、フォームが送信され (最終的にはページがリロードされます)、JavaScript からの変更はすべてリセットされます。を使用するだけonchangeで、入力に基づいて色を変更できます。

于 2013-05-18T15:22:54.650 に答える