web-dev-qa-db-ja.com

JavaScriptで.css（）を使用して細い境界線を設定します

そのため、ユーザーがボタンをクリックしたときに、ページ上のボタンの周囲に境界線を取得しようとしています。

ハンドラーをセットアップするには、次のようにします。

$(".reportButtons").click(function(){ //change border color });

そこで、ボタンの境界線の色を変更する2つの方法を試しました。最初の方法は、.css（）関数を使用することです。

$(this).css({"border-color": "#C1E0FF", 
             "border-weight":"1px", 
             "border-style":"solid"});

しかし、このようにすると、境界線は本当に太くなります（幅を1pxに設定した場合のように、ヘアラインにしたいです）

私が試した他の方法は、jquery-colorプラグインをダウンロードして、次のようなことをすることです：

$(this).animate({borderTopColor: "#000000"}, "fast");

それをしても、何も起こりません。エラーはありません-何も起こりません。しかし、境界線の色を変更しようとする代わりに、背景色を変更しようとすると、うまくいきます.... jquery-colorを間違って使用していますか？参考までに、背景を変更する方法を次に示します。

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

私が言ったように、それは動作します。 jquery-colorをダウンロードしたとき、違いがある場合は、1つのファイル（jquery-color.js）のみをダウンロードしました。

それでは、ヘアラインの境界線を取得するにはどうすればよいですか？ （それを機能させる方法があれば、animate（）メソッドを使用することをお勧めします）

javascriptjquerycolorsborder
25
Toadums

現在の例：

_border-width:1px_を定義する必要があります

コードは次のようになります。

_$(this).css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});
_

推奨例：

理想的にはクラスとaddClass/removeClassを使用する必要があります

$(this).addClass('borderClass');$(this).removeClass('borderClass');

およびCSS：

_.borderClass{
  border-color: #C1E0FF;
  border-width:1px;
  border-style: solid;
  /** OR USE INLINE
  border: 1px solid #C1E0FF;
  **/
}
_

jsfiddleの動作例： http://jsfiddle.net/gorelative/tVbvF/ \

jsfiddle with animate： http://jsfiddle.net/gorelative/j9Xxa/ これは、どのように機能するかの例を示しています。アイデアを得る必要があります。これを行うより良い方法があります。可能性があります。toggle()を使用するような

67
gorelative

CSSプロパティを設定する代わりにクラスを使用することをお勧めします。したがって、これの代わりに：

$(this).css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});

Cssクラスを定義します。

.border 
{ 
  border-color: #C1E0FF; 
  border-width:1px; 
  border-style:solid; 
}

次に、javascriptを次のように変更します。

$(this).addClass("border");
5
jrummell

たぶん「border-weight」ではなく「border-width」ですか？ 「境界線の重み」はなく、このプロパティは無視され、代わりにデフォルトの幅が使用されます。

5
ioseb

「SyntaxError：missing：after property id」メッセージで数時間無駄に戦った後、このトピックを展開できます：

border-widthは有効なcssプロパティですが、jQuery css oject定義に含まれていないため、.css（{border-width： '2px'}）はエラーを引き起こしますが、.css（{'border -width '：' 2px '}）、おそらく引用符で囲まれたプロパティ名は、受信したまま渡されます。

0
Robin Pinguey