javascript - 我怎样才能让 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;
    }

还有 JavaScript，位于 http://JonathansCorner.com/js/combined.js :

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 已经发生了变化.

我也尝试过使用例如jQuery('#slideshow').css('display', 'block !important').

有什么方法可以使用 jQuery(或单独的 JavaScript)以固定的方式设置属性？

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

Answer 1

您还没有关闭您的 iframe 标签，combined.js 永远不会加载。 iframe 不是自关闭标签，它们需要一个开始标签和一个结束标签。

<iframe></iframe>