Export CSS Styles in a seperate .css file, after being manipulated with JS/jQuery?

Question

I have to create a customized and basic SVG Editor using HTML5/JS/jQuery/CSS.
Input for the Editor are two files x.svg and its associated x.css file.

The x.svg will be loaded in the HTML Page, with its styles from x.css applied. Then styles like stroke, width... will be manipulated using JS/jQuery, all fine so far.

My problem is that after the user make some changes to the style and want to save those changes permanently in the x.css file, I dont know how to do that, I can write the Attribute: Value pairs easily to a file, but the x.css files has selectors, braces and so on...the output of the program should be a prober x.css file, notice that the x.svg will remain the same. How can I handle this problem, an detailed idea with no code is sufficient, thanks.

save changes to client-side I mean, the files loaded are also located on client, no server is used at all. — StaticBug
– StaticBug, Commented Dec 4, 2012 at 16:30

StaticBug · Accepted Answer · 2013-01-16 13:20:15Z

2

Ok here is the answer, I achieved it with the help of FileSaver.min.js and BlobBuilder.min.js from Eli grey, the function is attached to the click event of an anchor element, when user clicks a dialog comes, asking you to insert file name and where to store. Tested on Chrome 23, on version 24 it didnt work.

function exportCSS() 
{

//stop anchor link from taking us anywhere
event.preventDefault();
//index is chosen for test sofar, need next to iterate over all sSheets and pick the right one depending on svg file name
sSheet = document.styleSheets[2];
myRules = sSheet.cssRules;
len = myRules.length;
for (i = 0; i < 50; i++) {
    cssOutputString = cssOutputString + myRules[i].cssText + "\n";
}
console.log(cssOutputString);

//save the file
var blob = new Blob([cssOutputString]);

saveAs(blob, "file.css");
}

answered Jan 16, 2013 at 13:20

StaticBug

5775 silver badges17 bronze badges

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

1 Comment

Walter Stabosz Over a year ago

Here is a one liner to dump a stylesheet. Be sure to change the value of x to match your needs. const x=1; Array.from(document.styleSheets[x].cssRules).map(o=>o.cssText).join('\n');

thatidiotguy · Accepted Answer · 2012-12-04 16:31:55Z

0

You cannot save files to a client's hard drive using Javascript for security reasons.

answered Dec 4, 2012 at 16:31

thatidiotguy

9,01114 gold badges66 silver badges109 bronze badges

2 Comments

StaticBug Over a year ago

not even possible with HTML5 File API?html5rocks.com/en/tutorials/file/filesystem/#toc-file-writing

thatidiotguy Over a year ago

I did not say anything about HTML5

Collectives™ on Stack Overflow

Export CSS Styles in a seperate .css file, after being manipulated with JS/jQuery?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related