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

What is the best way to disable the functions doajax_red and doajax_blue when a radio button is checked?

Transparent CSS Table Styling

Place the div's scrollbar at the beginning of its content

What is the reason that em takes precedence over p for font-family?

AngularJS Input field fails to update due to a setTimeout function within the controller

Guide on exporting Excel data using Angular and TypeScript

Guide to making control bar fade out when video is paused on video.js

What are some ways to troubleshoot the TypeScript React demonstration application in Chrome?

Is there a way to alter the footer across all my pages using just one document?

Is there a CSS4 resolution for transitioning from 0 to auto?

How can I determine the width of a Bootstrap Column on a smartphone?

What is the best way to show and hide the information in a FAQ section when each one is clicked?

Having difficulty accessing the ::after element on Firefox when attempting to click

The HTML header is not displaying at the proper width as intended

Issue with converting string to Date object using Safari browser

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

What is the process for retrieving data from a javascript file that was submitted through a form?

Can CSS `content` support the combination of different font styles?

Is CodeMirror's PHP mode failing to function properly?