Obtain the text from an altered stylesheet in Firefox

I am currently programmatically updating stylesheets for a web page using JavaScript. My method involves having a local copy of the page and all associated assets stored on a server. After I finish making changes to the stylesheets, my goal is to save the modified versions onto disk.

To execute my JavaScript code on the loaded page in Firefox, I am utilizing Webdriver.

While Internet Explorer offers access to the stylesheet.cssText property to obtain the stylesheet source as a JS string, I am unable to use IE for this task. Therefore, I am seeking a way to achieve the same outcome in Firefox.

javascriptcssfirefoxwebdriverselenium-webdriver

Answer №1

To implement this functionality, you can refer to the code snippet provided in this JSFiddle example:

for (var st = 0; st < document.styleSheets.length; ++st) {
    var styleSheet = document.styleSheets[st];

    var reference = styleSheet.href || "<inline>";
    var appliedRules = [];
    for (var rulenum = 0; rulenum < styleSheet.cssRules.length; ++rulenum) {
        appliedRules.push(styleSheet.cssRules[rulenum].cssText);
    }
}

You may also find valuable information in the Mozilla Developer Network documentation, specifically regarding dynamic styling information usage.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting an out-of-range exception (System.ArgumentOutOfRangeException) in C# Razor pages while attempting an AJAX call

I have a razor page model that contains a get-method. public IActionResult OnGetDuration([FromBody]int id) { Subject subject = _service.GetSubjectById(id); int duration = subject.LessonsPerWeek; return new JsonResult('a&apo ...

javascriptc#asp.netajaxrazor-pages

Accordion menu causing Javascript linking problem

After following a tutorial, I managed to create an accordion menu in JavaScript. In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis. Now, my query is this: How can I retain the link functio ...

javascriptjquerycssaccordion

Outdated jQuery script no longer functioning (Wordpress)

I recently updated a WordPress site to Version 5.7.2 and now two of the custom Metaboxes are not functioning as expected. The issue seems to be related to the outdated jQuery version used by the Metaboxes. To address this problem, I installed a Plugin cal ...

javascriptjquerywordpress

What strategies can be implemented to avoid re-rendering in Angular 6 when the window is resized or loses focus?

I am currently working with a component in Angular 6.0.8 that consists of only an iframe element. Here is the code in page.component.html: <iframe [src]="url"> The logic for setting the URL is handled in page.component.ts: ngOnInit() { this.u ...

javascriptangulartypescript

Using JavaScript to control the state of a button: enable or

In the process of creating a basic HTML application to collect customer information and store it in a database, I have encountered a specific user interface challenge. Once the user logs into their profile, they should see three buttons. Button 1 = Print ...

javascriptjqueryhtmlcookiessession-state

Sharing asynchronous data between AngularJS controllers

Among the multitude of discussions on sharing data between controllers, I have yet to come across a satisfactory solution for my particular scenario. In my setup, one controller fetches data asynchronously using promises. This controller then creates a co ...

javascriptangularjsangular-promise

Having trouble with sending information to the PHP server, unable to determine the root cause

Can someone help me figure out why the data from a form being sent to a php script for sending an email isn't working correctly? It's part of a template code but I suspect there might be an error. Specifically, I believe the {'userName' ...

phpjavascripthtmlemail

Steps for eliminating an element using jQuery from a variable filled with HTML code

I'm developing a forum where users have the ability to quote other users' comments. When a user clicks on "quote" for a comment, it captures the HTML of that comment and displays it in a box that says Quote: Original post by a member, similar t ...

javascripthtmljquery

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Having trouble with jQuery loading for the first time

I am having trouble getting the jQuery to load properly. My goal is to toggle classes on specific items identified by their ID. When an item is clicked, I want it to have the class "menu-selected" while the other item has the class "unselected." I have i ...

javascriptjqueryhtmlcss

Having difficulty loading the controller into my AngularJS module

I've been attempting to organize my angularjs controllers into separate files without success. Folder Structure: --public-- --js/controller/resturant.js --js/master.js --index.php Content of master.js angular.module("rsw",[ ...

javascriptangularjsmodel-view-controllerangularjs-controller

Angular-material's Md-dialog popup box is displayed as a separate view within the Yeoman framework

I have recently created a project using Yeoman (angular-fullstack, angular-material) and encountered an issue with triggering the md-dialog box. When clicking on a div element, the dialog box is supposed to appear. However, instead of showing the popup the ...

javascriptjqueryangularjsangular-material

What is the mechanism of `this` in higher order components?

I am delving into the concept of higher order components by exploring this online resource. However, I am struggling to grasp how this is utilized within one. Am I correct in thinking that the this in the constructor refers to what will ultimately be retur ...

javascriptreactjsecmascript-6componentshigher-order-functions

Could you explain the distinction between push and offset within the grid system?

I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...

csstwitter-bootstrapuser-interfacetwitter-bootstrap-3

Following the same occurrence using varying mouse clicks

I am currently exploring the most effective method for tracking file downloads (specifically, pdf files) on my website using Google Analytics (UA). I understand that by utilizing <a href="book.pdf" onClick="ga('send','event','P ...

javascripthtmlgoogle-analytics

Tips on effectively utilizing a value that has been modified by useEffect

Here is my current code: const issues = ['x','y','z']; let allIssueStatus; let selectedIssueStatus = ''; useEffect(() => { const fetchIssueStatus = async() => { const response = await fetch(&ap ...

javascriptreactjsreact-hooksuse-effect

Methods for adding a new object to an array in Angular: Explained

How can I insert a new object in Angular? Here is the current data: data = [ { title: 'Book1' }, { title: 'Book2' }, { title: 'Book3' }, { title: 'Book4' } ] I would like to update the obje ...

javascripttypescript

Encountering an error when implementing a router object within a TypeScript class in a Node.js environment

I have a Node.js service written in TypeScript. I am currently working on implementing a separate routing layer within the application. In my app.js file, I have the following code: let IndividualRoute= require('./routing/IndividualRoute'); app ...

javascriptnode.jstypescriptexpressroutes

React has been reported to display a Minified React error even in its development mode

Currently, I am utilizing browserify and babel for transpiling and bundling my script. However, a challenge arises when React 16 is incorporated as it presents the following error message: Uncaught Error: Minified React error #200; for more details, kin ...

javascriptreactjsbrowserifytranspiler

What is the best way to link a file to index.html using feathers.js?

I am currently learning feathers and encountering a problem. I am attempting to include files similar to PHP's switch function. For instance: /src/middleware/index.js 'use strict'; const handler = require('feathers-errors/handler&ap ...

javascripthtmlnode.jsfsfeathersjs