How to add CSS class and control elements inside o

Question

How to add CSS class and control elements inside of the Iframe using javaScript.

<iframe width="340" scrolling="no" height="37" src="http://www.indiansplash.com/business/include/dash11i.php" id="ifr" hspace="0" marginwidth="0" marginheight="0" vspace="0" style="width: 585px; height: 47px; border: #dddddd 1px solid"></iframe>

Here is my code. http://jsfiddle.net/wV8gF/

Here i want to hide first column which are having BSE logo and i want to change the color of values.

Answer 1

Try this. It may useful.

http://jsfiddle.net/wV8gF/3/

Answer 2

Try to use the following code:

var my_td = $("#table_id tr td", $("#iframe_ID").contents());

Hope this works... Muhammad.

Answer 3

The DOM includes a frames collection you can access with JavaScript:

You'd need a name attribute on your iframe tag

<iframe name = "myFrame"
    width="340" scrolling="no" height="37" 
    src="http://www.indiansplash.com/business/include/dash11i.php" 
    id="ifr" hspace="0" marginwidth="0" marginheight="0" vspace="0" 
    style="width: 585px; height: 47px; border: #dddddd 1px solid">
</iframe>

Then you can access it like this:

var myFrame = frames["myFrame"]

You can apply a new stylesheet to the content by following the example here: How to apply CSS to iframe?

UPDATE

Following the example in the reference i cited above:

var cssLink = document.createElement("link") 
cssLink.href = "iframeStyles.css"; /* change this to the url for a stylesheet targetting the iframe */
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['myFrame'].document.body.appendChild(cssLink);

Then in iframeStyles.css:

td{border:1px solid red;} /*or whatever*/

You may need a selector with stronger specificity, or apply !important to styles to overide already existing declarations.