Access css class selector inside html document inside the app

Question

I've got this piece of HTML:

<html>
  ...
  <iframe>
    #document
    <html>
      ...
      <div className='change-me'></div>
      ...
    </html>
  </iframe>
</html>

That iframe is taken from stripe React element, I want to access something inside it and change its CSS.

I've dealt before with libraries that offer reusable React components, and managed easily to change every CSS detail there.

Problem: But here I can change nothing.

.change-me { background: red } // This one doesn't work

Maybe it's the fact that the component is making it's own html document, maybe I'm looking at the problem from the wrong end...

if it's an iframe than you cannot

Temani Afif
– Temani Afif

2018-10-17 10:36:31 +00:00
Commented Oct 17, 2018 at 10:36 — Temani Afif
– Temani Afif, Commented Oct 17, 2018 at 10:36

johnchar · Accepted Answer · 2018-10-17 11:05:32Z

1

Plain CSS is not going to work. You need to change the class of the element with your own class programmatically using JavaScript and the iFrame must contain the CSS file/styling containing that class

For example, you can add your CSS file to the iframe like this:

var iFrame = document.getElementById("youriFrameId");
var head = iFrame.getElementsByTagName("head")[0];

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/cssFile.css';

head.appendChild(link);

and then add your class to your target element like this:

iFrame.getElementById('targetElementId').classList.add("yourClass");

answered Oct 17, 2018 at 11:05

johnchar

54710 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access css class selector inside html document inside the app

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