0

次の簡単なコードがありますが、うまくいかないようです。

jQuery(document).ready(
    function($)
    {
        $(window).resize(
            function()
            {
                setGrid($);
            }
        );

        setGrid($);
    }
);

function setGrid($)
{
    var contactContainer    =   $('#contactInfo');

    if(contactContainer.width() < 650)
    {
        console.log('Too short');
        $('.col_1_2').css(
            {
                width     :   '100% !important',
                margin    :   '0 !important'
            }
        );
    }
    else
    {
        console.log('Too long');

        $('.col_1_2').css(
            {
                width       :   '49% !important',
                marginRight :   '1% !important'
            }
        );

        $('.last').css(
            {
                width       :   '49% !important',
                marginRight :   '0 !important',
                marginLeft  :   '1% !important'
            }
        );
    }
}

そのため、ウィンドウのサイズを変更すると、#containerInfo によると Chrome コンソールに両方のメッセージが表示されますが、.col_1_2 は更新されません。

私のコードに何か問題があり、それを見つけることができませんか?

注 :コンソールを開いていますが、コンソールにエラー メッセージは表示されません。また、コンソールの「要素」タブで、変更する必要がある要素を調べていますが、変更が見られません。通常、一致した要素に「スタイル」属性を追加する必要があります。

敬具

4

3 に答える 3

3

!important... を外してみてください。.css で適用されたスタイルは要素に直接追加されるため (適用される可能性のある他のスタイルをオーバーライドして)、それらは必要ありません。

于 2013-09-24T06:53:28.107 に答える
2

あなたが試したように、jQueryは !important を設定することを許可しません。ただし、次の方法でうまくいくと思います。

jQuery.style(name, value, priority);

これを使用して、.css('name') と同様に .style('name') で値を取得し、.style() で CSSStyleDeclaration を取得し、値を設定することもできます-優先度を「重要」として指定する機能を備えています. https://developer.mozilla.org/en/DOM/CSSStyleDeclarationを参照してください。

次のようなものを試してください：

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

ただし、メディア クエリを使用するのが正しい方法です。

于 2013-09-24T07:01:06.030 に答える
2

'(quote)これを試してください。属性がありません。quoteすべての cssを追加すると、機能します。

$('.col_1_2').css(
        {
            'width'       :   '49% !important',
            'margin-right' :   '1% !important'
        }
    );
于 2013-09-24T06:34:51.483 に答える