为什么我的简单jQuery代码无法与.css（）方法一起使用？

Question

I have the following simple code but it seem that not work.

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'
            }
        );
    }
}

So, when I resize the window I am getting both the messages in my Chrome console, according to the #containerInfo, but the .col_1_2 are not updated.

Is there anything wrong in my code and I cannot find it out ?

Note : I have my console open and I do not get any error message in my console. Also in the "Elements" tab of my console I am inspecting the element that must get modified, and I do not see any change. Normaly a "style" attribute should be added on the matched element.

Kind regards

Answer 1

尝试脱掉！important ...不需要它们，因为.css所应用的样式会直接添加到元素中（覆盖所有可能应用的其他样式）。

Answer 2

Try this, You are missing '(quote) in attribute. Add quote in all css then it will work.

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

Answer 3

jQuery will not allow to set !important as you have tried. However, I think the following will work for you.

jQuery.style(name, value, priority);

You can use it to get values with .style('name') just like .css('name'), get the CSSStyleDeclaration with .style(), and also set values - with the ability to specify the priority as 'important'. See https://developer.mozilla.org/en/DOM/CSSStyleDeclaration .

Try something like:

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'));

However, using media query is the correct way to proceed.