8

次のjavascript/jqueryコードがあります。

 var some_div = $('<div>', {});

 some_div.
    css('position', 'absolute').
    css('width' , '100').
    css('height', '100').
    css('top'   , '100px').
    css('background-color', '#ddf');

 some_div.appendTo('body');

some_divこれは、本体の上端から 100 ピクセルの位置に配置し、幅と高さを 100 ピクセルに設定するという点で、期待どおりに機能します。

topプロパティの行を に変更すると、css('top' , '100').つまり を省略した場合px、ボックスは指定されたプロパティを無視します。明らかに、px最上位のプロパティを有効にするには が必要です。

pxボックスの幅と高さを指定する必要がないのはなぜだろうと思っています。

4

1 に答える 1

6

ソースコードを熟読すると、ブラウザや CSS の奇妙な点ではなく、jQuery の癖のように見えます。jQuery の css 関数は、この関数で指定された値に対してほとんどの前処理を行います。

この関数は、特定の CSS の奇妙さと入力の奇妙さをさまざまな方法で処理します。1 つの方法は、「px」を追加して数値を文字列に変換することです。文字列を提供するため、これはあなたの場合には当てはまりません。

jQuery には、CSS 値を DOM ノードに設定する前に呼び出されるフックのセットもあります。ここでは、幅と高さの値が拡張され、 IE5.5 のボックス モデルと によって追加される px が考慮されsetPositiveNumber()ます。

結論: 上、下、左、右、幅、高さのスタイルから「px」を省略すると、無効な CSS になります。jQuery は時代遅れのブラウザーと数値をサポートするために属性を変更しているため、「px」を省略して、幅と高さの属性で無効な CSS を回避しています。

以下が機能します。

css('top' , 100)
于 2012-12-07T11:16:54.550 に答える