我有以下简单的代码,但似乎无效。
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未更新。
我的代码有什么问题我无法找到它吗?
注意:我的控制台已打开,我的控制台中没有收到任何错误消息。同样在我的控制台的“元素”选项卡中,我正在检查必须修改的元素,并且我没有看到任何更改。 Normaly应该在匹配的元素上添加“样式”属性。
亲切的问候
答案 0 :(得分:3)
尝试取消!important ...你不需要它们,因为.css应用的样式会直接添加到元素中(覆盖可能适用的任何其他样式)。
答案 1 :(得分:2)
试试这个,你在属性中缺少'(quote)
。在所有css中添加quote
然后它将起作用。
$('.col_1_2').css(
{
'width' : '49% !important',
'margin-right' : '1% !important'
}
);
答案 2 :(得分:2)
jQuery不允许设置!重要,因为你已经尝试过。但是,我认为以下内容适合您。
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'));
但是,使用媒体查询是正确的继续进行方式。