如何将加载到<对象>中的元素样式设置为数据

How to set style of element loaded into <object> as data

本文关键字：元素 样式 数据 设置 对象 加载      更新时间：2023-09-26

我最近继承了一些我需要维护的代码，其中一部分是打算在iPad上使用的网络应用程序。

不幸的是，最近的iOS 8更新破坏了所述Web应用程序的一部分。

在一个部分中，Web应用程序包含一个iframe，该iframe加载到项目列表中。此 iframe 过去在作为 Web 应用程序运行时仅用一根手指滚动，但现在只能用两根手指滚动。* iOS 网络应用程序中 iframe 内容的单指与两根手指滚动是另一罐蠕虫，而不是我正在寻求帮助的 * - 我需要帮助来实施我的解决方案。

如果我将内容放在div 中，我可以让它根据需要滚动，但是，我还必须使用一个对象来加载内容（来自单独的页面） - 这就是我的 jQuery 问题出现的地方。

当从加载的列表中选择一个项目时，它会被突出显示 - 一旦用户完成并提交他/她的选择，然后使用jQuery"取消选择"突出显示"项目以删除"突出显示"样式。

这在 iframe 上工作正常，但我无法更改项目的样式，因为它们包含在div 和对象中。

以下是一些代码片段来说明正在发生的事情：

原始（与 iframe 一起正常工作）

<iframe id="myiframe" src="item_list.html"></iframe>
<script>
    function deselect()
    {
        var itemcount = $('#ItemCount').val();
        for (var i = 0; i < itemcount; i++) {
            // item ids are named a1, a2, a3, etc.
            $("#myiframe").contents().find("#a" + i).css("font-size", "26px");
            $("#myiframe").contents().find("#a" + i).css("font-weight", "normal");
            $("#myiframe").contents().find("#a" + i).css("color", "#3A3B3B");
        }
    }
</script>

我的尝试（无效）

<div id="myiframe">
    <object id="myloader" type="text/html" data="item_list.html" ></object>
</div>
<script>
    function deselect()
    {
        var itemcount = $('#ItemCount').val();
        for (var i = 0; i < itemcount; i++) {
            // item ids are named a1, a2, a3, etc.
            //doesn't work - I think contents() is specifically for iframes?
            $("#myiframe, #myloader").contents().find("#a" + i).css("font-size", "26px");
            // none of these work
            var path = "#myiframe, #myloader, #a" + i ;
            var path = "#myiframe, #a" + i ;
            var path = "#myloader, #a" + i ;
            var path = "#a" + i ;
            $(path).css("font-size", "26px");
            // none of these work
            var path = "#myiframe, #myloader" ;
            var path = "#myiframe" ;
            var path = "#myloader" ;
            $(path).find("#a" + i).css("font-size", "26px");
            // someone suggested using data() but it didn't work for me
            // either AND I don't think that that's how it's used anyhow
        }
    }
</script>

诚然，我并不是一个真正的jQuery人，但这似乎应该相当容易......

提前感谢您提供的任何帮助。

尽管我认为使用 ajax 将内容加载到div（和单个 DOM）中更好，但我找到了一种在 <object> 元素中访问文档的方法。

$("#a0", $("#myloader")[0].contentDocument)将选择文档中保存在object数据中的a0元素。

jquery 选择的第二个参数是要搜索的上下文，$("#myloader)[0]返回 HTMLObjectElement（等效于 document.getElementById('myloader') ，contentDocument返回通过 data 属性检索的 HTML 文档。 

function deselect()
{
    var itemcount = $('#ItemCount').val();
    for (var i = 0; i < itemcount; i++) {
        // item ids are named a1, a2, a3, etc.
        //searches the content document within the object tag
        $("#a"+i, $("#myloader")[0].contentDocument).css("font-size", "26px");
        // I still think you should use .addClass() and .removeClass() 
        // (or data attributes if you want to be super fancy),
        // changing the styles with CSS,
        // rather than manipulate the styles directly in javascript.
    }
}

使用 <object> 元素是否有理由？Jquery有一个方法.load()它将请求返回的数据/html并将其插入到元素中。http://api.jquery.com/load/

<div id="myiframe">
  <div id="myloader"></div>
</div>

然后，您将加载数据：

<script type='text/javascript'>
   $(function() {
     $('#myloader').load("item_list.html", function() {
        //at this point, the elements are in the document:
        $('#a0').css("font-size", "26px");
        //...
     });
   });
   function deselect() {
     var itemcount = $('#ItemCount').val();
     for (var i = 0; i < itemcount; i++) {
       $('#a'+i).css("font-size", "26px");
       //etc.
     }
   }
</script>

我想补充一点，而不是在javascript中手动编辑css，而是使用jquery来.addClass()，removeClass()或.toggleClass()包含您正在寻找的样式的css类。

相关文章：