Using JavaScript to generate a <style> element and accessing the cssRules

Question

Using JavaScript to generate a <style> element and accessing the cssRules

After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom and Michael work well in most browsers but fail in Chrome and Safari as they do not create a "cssRules" property for the style sheet.

Is there anyone who can guide me on how to create a style sheet for an iframe that will have a "cssRules" property in Chrome and Safari?

My goal is to add a style sheet to an iframe created within my web page since it seems to lack one. Once I overcome the initial obstacle, I plan to transfer styles from the parent document's style sheet to the iframe's style sheet. If there are any challenges or warnings associated with this process, I would appreciate knowing them ahead of time.

html css google-chrome safari stylesheet

Answer 1

Answer №1

My testing involved Firefox 3.6, Chromium 8, and Opera 11 on Ubuntu 10.10.

Here is the code for temp.html:

<style>
    body { background-color: blue; }
</style>

 <body>
    Hello
</body>

And here is the code for index.html:

<html>
<head>
    <script>
        function test(){
            // creating a new <style> tag
            var stl = document.createElement("style");
            // defining its content
            stl.innerHTML = "body { background-color: red}";

            // accessing the iframe
            var myIframe = document.getElementById("myiframe");

            // applying the new CSS to the iframe
            myIframe.contentWindow.document.
                    getElementsByTagName('head')[0].appendChild(stl);
        }
    </script>
</head>
<body>
    <iframe id="myiframe" src="temp.html"></iframe>
    <button onclick="test()">
</body>
</html>

By clicking the button, the background color in the iframe changes to red.

P.S. Apologies if this information appears redundant. I just clicked on the link in your other post now.

Answer 2

My testing involved Firefox 3.6, Chromium 8, and Opera 11 on Ubuntu 10.10.

Here is the code for temp.html:

<style>
    body { background-color: blue; }
</style>

 <body>
    Hello
</body>

And here is the code for index.html:

<html>
<head>
    <script>
        function test(){
            // creating a new <style> tag
            var stl = document.createElement("style");
            // defining its content
            stl.innerHTML = "body { background-color: red}";

            // accessing the iframe
            var myIframe = document.getElementById("myiframe");

            // applying the new CSS to the iframe
            myIframe.contentWindow.document.
                    getElementsByTagName('head')[0].appendChild(stl);
        }
    </script>
</head>
<body>
    <iframe id="myiframe" src="temp.html"></iframe>
    <button onclick="test()">
</body>
</html>

By clicking the button, the background color in the iframe changes to red.

P.S. Apologies if this information appears redundant. I just clicked on the link in your other post now.

Using JavaScript to generate a <style> element and accessing the cssRules

Answer №1

Similar questions

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Assigning websockets to a global variable may cause them to malfunction

Wrapping header text in Vuetify's v-data-table

Incorporate row numbering feature into jQuery DataTables

Is it possible to update the event parameters with every click?

Switching the endpoint renders the middleware ineffective

Utilizing the GET method within a form

Learn how to smoothly transition between AJAX pages by toggling a class on click for a seamless animation

Showing a loading animation inside an HTML element

Enhance your Zara shopping experience with the dynamic image zoom-in

How can you use Dart to uncover the content within an H1 element on an HTML webpage?

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

My webpage layout doesn't quite accommodate my content, so I need to adjust it to be more zoom

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Change the default direction of content scrolling in CSS and JavaScript to scroll upwards instead of

Select an item by populating it with JQuery

As the window width decreases, the image is breaking free from its container

Issues with Magento Shopping Cart upon using the browser's back button

Using Bootstrap to align items to the right in a navigation bar

Converting an NPM package into a gulp workflow