0

I have following code snippet:

...    
<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>

I want to add style for this rdMainBody. There are more specific #rdMainBody ID's on my webpage but I only want to add style to this one.

Everything from ID's and classes are auto generated, except the iframe, it contains an ID srCashOverviewDashboardand a class srCashOverviewDashboard.

So I was trying to add something in my css file like .srCashOverviewDashboard #rdMainbody or #srCashOverviewDashboard #rdMainbody

But this doesn't seem to work, do I do something wrong or do I need to do something else?

Greetings

KeinHappyAuer
  • 173
  • 1
  • 1
  • 9

1 Answers1

0

You can use jQuery's .content() function to access it.

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

See also this FIDDLE and this post.

Community
  • 1
  • 1
Dirk Jan
  • 2,355
  • 3
  • 20
  • 38