web-dev-qa-db-ja.com

入力コントロールの境界線の色をリセットします（HTML / Javascript）

Javascriptを使用して入力コントロールを変更した後、入力コントロールの境界線の色をリセットする方法を知っている人はいますか？不正または無効なデータが含まれているフィールドなどを強調表示することにより、検証に役立ちます。

例えば。国境の変更：

document.getElementById('myinput').style.border = '1px solid red';

リセットする方法は？次の行は境界線を完全に削除します...

document.getElementById('myinput').style.border = '';

境界線の色を特定の色（黒や灰色など）にリセットすると、一部のブラウザ/オペレーティングシステムでは、コントロールの「テーマ」のようなものが奇妙に見える場合があります。

ヒープに感謝します！

javascripthtmldombordervalidation
20
davidsleeps

スタイル属性を設定してはいけません。 CSSクラスを使用してそれを行います。また、Javascriptライブラリを使用してこれを処理することをお勧めします。コードをすっきりさせるだけです。

CSS属性を削除すると、それらを何に戻すべきかが常にわからないため、問題が発生します。クラスの追加と削除は...機能します。

要素ごとに複数のクラスを持つことができるので、この方法でそれを行うことに反対する議論は実際にはありません（imho）。

私はjQueryに慣れているので、私の例はそれです。

進入禁止：

$("#myinput").css("border", "1px solid red");

正しい方法：

<style type="text/css">
.redborder { border: 1px solid red; }
</style>

<script type="text/javascript">
$("#myinput").addClass("redborder");
$("#myinput").removeClass("redborder");
$("#myinput").toggleClass("redborder");
</script>
27
cletus

これは私のために働きます：

document.getElementById('myinput').style.removeProperty('border');
4
egrutz

国境をなくしたいだけですか？あなたが言ったように、そうではないと私は思いません。

「リセット」する適切な方法は、デフォルトに設定することです。デフォルトが何であるかはわかりませんが、「1pxblack」などのようなものだと思います。

私は通常、この手法をさまざまなアプリケーションで使用します。デフォルトがわからないときは、自分で「デフォルト」を設定して繰り返します。 Webページでの私のお気に入りのテクニックの1つは、境界線ではなく、コントロールの背景色を設定することです。それは非常に目立ち、より落ち着いた色を選択しても影響を与えることができます。その場合、背景をデフォルトの白に戻すのは非常に簡単です。

0
Gregory A Beamer