如何让jQuery.css()胜过样式表呢？

Question

我一直在一个页面上工作,我想根据有多少屏幕空间以编程方式在封面幻灯片上设置CSS属性.如果页面少于一个边界号,我不想激活幻灯片.如果页面的宽度大于该边界数,但小于另一个阈值,我希望幻灯片缩小,并缩小更小的尺寸.最后,如果它大于两者,我想将幻灯片放在其逻辑容器中.

来自http://JonathansCorner.com/blacksmiths-forge/experimental.html的消息来源:

<iframe id="slideshow" border="0" frameborder="0" frameborder="no"
style="display: none;" width="318" height="424" src="/book_covers.cgi?width=318" />

http://jonathansCorner.com/css/combined.css上的CSS 有:

#slideshow
    {
    height: 424px;
    position: fixed;
    top: 240px;
    right: 190px;
    width: 318px;
    }

和http://jonathansCorner.com/js/combined.js上的JavaScript :

if (jQuery(window).width() > 1200)
    {
    if (jQuery(window).width() > 1300)
        {
        var width = min(jQuery(window).width() - 1200, 318);
        document.getElementById('slideshow').src = "/book_covers.cgi?width=" +  width;
        document.getElementById('slideshow').width = width + 'px';
        document.getElementById('slideshow').width = width;
        jQuery('#slideshow').css('right', jQuery(window).width() - 1200 - 318);
        jQuery('#slideshow').css('display', 'block');
        }
    }

我进入的心理模型是jQuery.css()将是一张王牌,在我迄今为止尝试过的排列中,我从未意识到jQuery.css已经发生了变化.

我也试过用eg jQuery('#slideshow').css('display', 'block !important').

有没有什么方法可以使用jQuery(或单独的JavaScript)以他们坚持的方式设置属性？

(我最初的理解有什么问题,关于DOM节点样式和属性的编程设置可以做什么和不能做什么的真相是什么？)

Answer 1

您还没有关闭iframe标记,从未加载combined.js.iframe不是自动关闭标签,它们需要一个开头和一个结束标签.

<iframe></iframe>