html - 如何指向1帧以下CSS的ID | srCashOverviewDashboard

This question already has answers here:

Using CSS to affect div style inside iframe

                                    （13个回答）


                                3年前关闭。


我有以下代码片段：

...
<iframe id="srCashOverviewDashboard" class="srCashOverviewDashboard" width="100%" height="1000px" frameborder="0" name="srCashOverviewDashboard" scrolling="no" rdiframeadditionalscrollheightadded="" rdiframeadditionalscrollwidthadded="" onload=" iframeResize(this)" rdiframefixedwidth="True" data-hiddensource="rdPage.aspx?rdReport=Dashboard.CashLevel1&rdRequestCache=3707323034&rdSubReport=True&rdResizeFrame=True" src="rdPage.aspx?rdReport=Dashboard.CashLevel1&rdRequestCache=3707323034&rdSubReport=True&rdResizeFrame=True" style="overflow: hidden; width: 100%; height: 1000px;">
  <!DOCTYPE html>
  <html id="yui_3_1_1454057078100_124" class="yui3-js-enabled" xmlns:rdxslextension="urn:rdXslExtension" xmlns:msxsl="urn:schemas-microsoft-com:xslt" style="margin: 0px; width: 100%; height: 100%; cursor: auto;">

  <head>
    <body id="yui_3_1_1454057078100_106" onload="rdBodyLoad()" style="margin: 0px; width: 100%; height: 100%;">
      <div style="display: none; background-image: url('rdTemplate/rdWaitAll.gif')"></div>
      <div id="yui_3_1_1454057078100_1056" class="yui3-widget rdquicktip yui3-widget-positioned rdquicktip-hidden" style="left: 0px; top: 0px;">
      <div style="display: none; background-image: url('rdTemplate/rdWaitAll.gif')"></div>
      <div style="display: none; background-image: url('rdTemplate/rdWaitAll.gif')"></div>
      <div id="yui_3_1_1454057078100_345" class="yui3-widget rdquicktip yui3-widget-positioned rdquicktip-hidden" style="left: 0px; top: 0px;">
      <div style="display: none; background-image: url('rdTemplate/rdWaitAll.gif')"></div>
      <div id="yui_3_1_1454057078100_237" class="yui3-dd-shim" style="top: 0px; left: 0px; position: absolute; z-index: 9999; overflow: hidden; background-color: red; display: none; height: 5px; width: 5px;"></div>
      <div style="display: none; background-image: url('rdTemplate/rdWaitAll.gif')"></div>
      <div id="yui_3_1_1454057078100_56" class="yui3-widget rdquicktip yui3-widget-positioned rdquicktip-hidden" style="left: 0px; top: 0px;">
      <div style="display: none; background-image: url('rdTemplate/rdWaitAll.gif')"></div>
      <form id="yui_3_1_1454057078100_107" method="POST" name="rdForm">
        <input id="rdCSRFKey1" type="hidden" value="cb35ed6b-fbd0-4f81-947f-db1b4e3a8531" name="rdCSRFKey">
        <div id="rdMainBodyStart"></div>
        <div id="rdMainBody">
        ...
        </div>

我想为此rdMainBody添加样式。我的网页上有更具体的#rdMainBody ID，但我只想为该ID添加样式。

ID和类中的所有内容均会自动生成，但iframe除外，其中包含ID srCashOverviewDashboard和类srCashOverviewDashboard。

所以我试图在我的css文件中添加一些东西
.srCashOverviewDashboard #rdMainbody或#srCashOverviewDashboard #rdMainbody

但这似乎不起作用，是我做错了事还是需要做其他事？

问候

最佳答案

您可以使用jQuery的.content（）函数来访问它。

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    opacity: 0,
    color: 'purple'
});

另请参见此FIDDLE和this帖子。