為什么我的簡單jQuery代碼無法與.css（）方法一起使用？

Question

我有以下簡單的代碼，但似乎不起作用。

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並未更新。

我的代碼有什么問題，我找不到嗎？

注意：我的控制台已打開，但控制台中未出現任何錯誤消息。 同樣在控制台的“元素”選項卡中，我正在檢查必須修改的元素，但看不到任何更改。 通常，應在匹配的元素上添加“樣式”屬性。

親切的問候

Answer 1

嘗試脫掉！important ...不需要它們，因為.css所應用的樣式會直接添加到元素中（覆蓋所有可能應用的其他樣式）。

Answer 2

試試這個，您在屬性中缺少'(quote) 。 在所有CSS中添加quote ，然后它將起作用。

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

Answer 3

jQuery將不允許您嘗試設置！important。 但是，我認為以下將為您工作。

jQuery.style(name, value, priority);

您可以使用它來獲取.style（'name'）的值，就像.css（'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'));

但是，使用媒體查詢是繼續進行的正確方法。