为什么我的简单jQuery代码不适用于.css(）方法

Why my simple jQuery code doesn't work with .css() method?

本文关键字：css 方法 适用于 不适用 我的 简单 jQuery 代码 为什么      更新时间：2023-09-26

我有以下简单的代码，但似乎不起作用。

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没有更新。

我的代码中有什么问题，我找不到吗？

注意：我打开了控制台，但在控制台中没有收到任何错误消息。同样在控制台的"元素"选项卡中，我正在检查必须修改的元素，但我没有看到任何变化。通常，应在匹配的元素上添加"样式"属性。

亲切问候

尝试摘掉 ！important...您不需要它们，因为与.css一起应用的样式会直接添加到元素中（覆盖可能适用的任何其他样式）。

试试这个，你在属性中缺少'(quote)。在所有 css 中添加quote然后它将起作用。

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

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

但是，使用媒体查询是继续操作的正确方法。

相关文章：