29

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

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

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

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

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

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

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

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

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

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

私が言ったように、それはうまくいきます。jquery-color をダウンロードしたとき、1 つのファイル (jquery-color.js) だけをダウンロードしました。

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

4

4 に答える 4

73

現在の例:

定義する必要があります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/ \

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

于 2012-06-19T17:33:54.633 に答える
6

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");
于 2012-06-19T17:38:48.547 に答える
5

「border-weight」ではなく「border-width」だけでしょうか？「border-weight」はなく、このプロパティは単に無視され、代わりにデフォルトの幅が使用されます。

于 2012-06-19T17:32:12.073 に答える