1

我有一个名称列表，单击它会打开一个花式框模式并显示一个以 HTML 文件作为 src 的 iframe。HTML 文件包含此人的图像和简短的个人简介。

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

    !--[如果 gte mso 10]>
    
     /* 样式定义 */
     表.MsoNormalTable
        {mso-style-name:"Table Normal";
        mso-tstyle-rowband 大小：0；
    ……
... 等等

我已经手动进入并更改了图像的大部分文件样式-

img {浮动：对；填充：对；}

这适用于大多数文件，但即使我进入 img 标签并设置它的样式，也有一些（特别是一些名叫 Don Horton 的人）没有任何事情发生——

`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 的链接。

我想在这里明确一点，如果令人困惑，我可以上传一些更大的代码段以清楚起见。

4

2 回答 2

0

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

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

所有 jQuery 选择都带有一个可选的“context”参数，该参数指定选择器应该作用于什么 HTML。您的 iframe 当然必须指向 page 变量才能使更改可见。

这是在黑暗中拍摄的，希望对您有所帮助。

于 2012-09-06T17:43:57.030 回答
0

只需在您的服务器上创建一个包含对这些样式的引用的 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 的名称。

于 2012-09-06T17:34:07.887 回答