1

我一直在处理一个页面，我想根据屏幕空间的大小以编程方式在封面幻灯片上设置 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 已经做出了改变。

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

有什么方法可以使用 jQuery（或单独的 JavaScript）以它们会坚持的方式设置属性？

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

4

1 回答 1

5

您尚未关闭 iframe 标记，combined.js 永远不会加载。iframe 不是自动关闭标签，它们需要一个开始和一个结束标签。

<iframe></iframe>
于 2013-05-02T19:03:51.497 回答