Dynamically apply CSS styles in iframe using Jquery

Question

I have an iframe content containing multiple classes.i.e, header, footer

I want to apply css styles for these classes dynamically using jquery,

I try to apply only for header in the following way, but how do i apply for footer(if we have multiple classes) dynamically.

$('#iframe').find('.header').css({
            'color': objProp.cssstyles['header']['color'],
            'background-color': objProp.cssstyles[pageSection]['background']                
        });

i have a json data,

var objProp = {            
        "cssstyles": {
            "header": {
                "background": "#FFFFFF",
                "color": "#959597"
            },               
            "footer": {
                "background": "#2b9ef0",
                "color": "#f7992d"                  
            }
        }
    };

Did you manage to change any styles of anything yet in the iframe? By the looks of the code you showing, it doesn't look like you'd succeed with the header.Need the HTML of the page and the HTML of the page inside the iframe. If you do not control the page within the iframe, then forget the whole idea. — zer00ne
– zer00ne, Commented Apr 12, 2016 at 7:51

vijayP · Accepted Answer · 2016-04-12 08:23:02Z

You can refer to below code for an idea. This demo HTML doesn't contains any iframe but i think you can manage it as per your HTML Please refer to jQuery's .css() documentation for further help.

var objProp = {            
        "cssstyles": {
            "header": {
                "background": "#FFFFFF",
                "color": "#959597"
            },               
            "footer": {
                "background": "#2b9ef0",
                "color": "#f7992d"                  
            }
        }
    };

$(document).ready(function(){
  var cssStyles = objProp["cssstyles"];
  for(var key in cssStyles){
    var cssObjToApply = cssStyles[key];
    $("."+key).css(cssObjToApply);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="header">
  this is header
</div>  
<div class="footer">
  this is footer
</div>

Collectives™ on Stack Overflow

Dynamically apply CSS styles in iframe using Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related