All geek questions in one place

Create new (unchanged) style sheets with jQuery

We have a small tool that I created where you can edit the jQuery template in one field and JSON data in another, and then click the button to immediately see the results in the browser.

I really need to expand this, so the designer can edit the entire CSS stylesheet in another field, and when we create the template, CSS will be applied to it. The idea is that as soon as we get good results, we can take the contents of these three fields, put them in files and use them in our project.

I found the jQuery.cssRule plugin, but it looks like it is mostly abandoned (all links have not gone away and there has been no development after three years). Is there anything better or is this the only game in town?

Note. We are looking for something where someone enters traditional CSS style sheet data that is used directly for rendering on the page, and which can be edited and changed as desired when the old rules go away and the new ones are used in their place. I'm not looking for something where a developer should learn jQuery syntax and introduce individual calls like .css ("attribute", "value") in jQuery.

+6
source share
4 answers

Of course, just add the style tag to the head:

 $("head").append("<style>p { color: blue; }</style>");

See in action here .

You can replace the text in the dynamically added style tag using something like this:

 $("head").append("<style id='dynamicStylesheet'></style>"); $("#dynamicStylesheet").text(newStyleTextGoesHere);

See it in action here .

+14
source

The cleanest way to achieve this is to isolate user-created content using an <iframe> . Thus, changes to CSS will not affect the editor. (For example, input { display:none; } cannot break your page.)

Just draw your HTML (including CSS in the <head> document) and write it in an <iframe> .

Example:

 <iframe id="preview" src="about:blank"> var i = $('#preview')[0]; var doc = i.contentWindow || i.contentDocument; if (doc.document) doc = doc.document; doc.open('text/html',true); doc.write('<!DOCTYPE html><html>...</html>'); doc.close();
+4
source

If the user should be able to edit the whole stylesheet, and not just the attributes of one style, you can save the entered stylesheet in a temporary file and load it into your html document using

 $('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
+1
source

does it sound like you want to write an interpreter for css? if it is entered manually in the text, then using it later will be as simple as copying and pasting it into a css file.

so if you have a text area on your page for css input and you want to apply these rules at the click of a button, you can use something like this (only pseudo code, you need to work):

 //for each css id in the text area $.each($('textarea[name=cssTextArea]').html().split('#'), function({ //now get each property $.each($(this).split(';'), function(){ $(elem).css({property:value}); }); });

then you could write something to go through each element your designer introduced and get the current CSS rules for it (including the ones you applied using some code, for example, the snippet above) and create a css line from what could then be deduced or stored in db. This is a pain and a lot of falsification with substrings, but, unfortunately, I do not know a faster or more efficient way.

Hope this at least gives you some ideas.

+1
source

Source: https://habr.com/ru/post/895420/

More articles:


All Articles