Question

我有一个名单列表，点击后会打开一个fancybox模式并显示一个iframe，其中HTML文件为src。 HTML文件包含人物的图像和简短的生物。

我想让图像向右浮动并填充10px的填充。问题是，我无法使用css或jQuery访问它，因为花式框的工作方式或HTML文件的导出方式（它们是由其他人使用inDesign创建的，所以有这些奇怪的东西 -

    !--[if gte mso 10]>
    
     /* Style Definitions */
     table.MsoNormalTable
        {mso-style-name:"Table Normal";
        mso-tstyle-rowband-size:0;
    ....

...依此类推

我已经手动操作并更改了图像的大多数文件样式 -

 img { float:right; padding:right;}

这适用于大多数文件，但有一些（特别是一些人名Don Horton），即使我进入img标签并且风格也没有发生 -

 `img src="/Horton_Don.html" style="float:right; padding:10px;"`

不起作用。

我还尝试了几个jQuery函数，这是一个例子：

    $(document).ready(function()
        $('img').css("float", "right").css("padding", "10px");
    });

但我觉得这不起作用，因为fancybox，或者也许是iframe。

所以我的问题是：

A）有一种简单的方法可以通过jQuery更改每个HTML文件中的所有图像（因为这会节省很多时间，而不是手动进入每个文件）

B）是否有与inDesign废话有关的东西让我不能改变img的东西，如果有的话，有人可以给我一个关于要查找的内容的想法/一个解释inDesign如何导出html的链接。 / p>

我正试图明确这里，如果它令人困惑我可以上传一些更大的代码段以保持清晰。

Answer 1

只需在服务器上创建一个CSS文件，该文件包含对这些样式的引用。

CSS文件

出于本示例的目的，我们将此文件称为myStyles.css 。

img{
    float:right;
    padding:10px;
}

看起来fancybox有一个onComplete api回调函数。

$('ele').fancybox({
    'onComplete' : function(){

        var cssItem = document.createElement("link") 
        cssLink.href = "myStyles.css"; 
        cssLink .rel = "stylesheet"; 
        cssLink .type = "text/css"; 
        frames['myIframe'].document.body.appendChild(cssLink);
    }
});

其中myIframe是iFrame的名称。

Answer 2

这是半个猜测和半个黑客，但对于A，您可以在页面上使用$ .get（）并将其分配给变量。然后，您可以将该变量用作任何编辑的上下文。

var page = $.get('page.html');
$('img', page).css('float', 'right').css('padding', '10px');

所有jQuery选择都采用可选的“context”参数，该参数指定选择器应该作用的HTML。您的iframe当然必须指向页面变量才能看到更改。

这是一个在黑暗中的镜头，希望它有所帮助。

模态iframe img jQuery

2 个答案: