Append data to css class - jQuery string operation

Question

Please take a look at the following html. EDIT: UPDATED THE HTML PART

<div id="html_editor">

      <head>
       <style type="text/css" >
          .blog
          {
           border:2px solid grey;
           width:auto;

          }
          <style>{customcss}</style>
        </style>
        </head>
        </html>
</div>

Please take a look at the Css Class 'blog',i want to add some other values to that class through js/jQuery. Actually it is a HTML editor ,on the body tag user selecting a the 'blog' element,so that time i want to give the user to set CSS for the blog,user changing the CSS on a text area,after that i want to append/rewrite the data to that 'blog' class.

Ex : user setting the class like the following

width:250px;
background:red;
key:value..etc..

so after that i want to change that 'blog' css class to

.blog
          {
          width:250px;
    background:red;
    key:value..etc..

          }

How can i achieve this ? is there any way by using jQuery ??

UPDATE : Please check this image.

Thank you.

nikan · Accepted Answer · 2011-10-22 06:00:09Z

1

For an HTML like this:

<style id="mycss" type="text/css" >
      .blog
      {
       border:2px solid grey;
       color:black;
       }
 </style>

<div class="blog">This is a blog</div>

Try this js:

var style = document.getElementById("mycss");
newrule = document.createTextNode('.blog { color:red;}');
style.appendChild(newrule);

This isn't very efficient as it overrides the previous rule, but you can get the general method.

JSFiddle here

answered Oct 22, 2011 at 6:00

nikan

1,2332 gold badges10 silver badges20 bronze badges

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

1 Comment

Red Over a year ago

Thank you,this is what i need,but i changed my mentality [Your last line],the main problem is users wont put id for style,also its dynamic in structure.So let me do some database operations,saving the css value on database then retrieving on demand...

user8710 · Accepted Answer · 2011-10-22 07:00:54Z

I went ahead and did the following test because I haven't done JavaScript in a while and I wanted to give it a go. The first method uses String.split to parse the textarea input and the second some basic regex. The regex will fail if there's more than one statement per line. They both put a syntax burden on the user greater than native CSS, so:

I think you should do what nikan suggested.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", '1.6.4');
            console.debug('loading');
            google.setOnLoadCallback(function() {
                var input = $('#userinput').val();

                var statements = input.split(';');
                for (var statement in statements){
                    var style = statements[statement].split(':');
                    var name = $.trim(style[0]);
                    var value = $.trim(style[1]);

                    $('#target').css(name, value);
                }

                var very_basic_css_matching = /^ *([^:]+): *([^;]+);/gm;
                while (matches = very_basic_css_matching.exec(input)){
                    $('#target').css(matches[1], matches[2]);
                }
            });
        </script>
    </head>
    <body>
        <textarea id="userinput">
width:250px;
height:10px;
background:red;
        </textarea>

        <div id="target">
        </div>
    </body>
</html>

Ivan Castellanos · Accepted Answer · 2011-10-22 15:24:35Z

0

With jquery is easy to access the current style and modify it:

http://jsfiddle.net/jedSP/7/

Try writing "color:white" or "background:green" in the text area, works in all browsers. When the user is done just use $("#style").html() to get the current CSS.

EDITED: Updated link... like this?

edited Oct 22, 2011 at 15:24

answered Oct 22, 2011 at 7:45

Ivan Castellanos

8,2521 gold badge51 silver badges44 bronze badges

Comments

Marshall Brekka · Accepted Answer · 2011-11-01 21:29:20Z

0

if you want this to happen in real time, its as easy as taking the value of the textarea and parsing it in javascript, and then applying the values with jquery like so

$('.blog').css({'property1':'value1','property2':'value2'});

now if you want to save these changes permanently, you will need to send the new css values to your server and store them in a database or something.

EDIT: to save it on the database...

You can get the value from the textfield like so. var cssVal = $('#textfieldid').val();

And then use the jQuery ajax function to send the new value to your server.

http://api.jquery.com/jQuery.ajax/

I'm not going to go into all of the details of this, you can find database tutorials everywhere online, but then you want to take the value of that textfield that you sent to your server using jQuery, and save it in your database table that stores the css rule properties.

Then when you regenerate the page, you will just retrieve the new css value from your database.

edited Nov 1, 2011 at 21:29

answered Oct 22, 2011 at 5:42

Marshall Brekka

1,1962 gold badges11 silver badges15 bronze badges

6 Comments

Red Over a year ago

No,this is not what i need,i want to append the date to the two scopes on tht blog class.

Marshall Brekka Over a year ago

I don't see how that's not doing that, at run time any elements that have the blog class will get the new styles applied to them. However, if you intend on adding new elements with the blog class then nikens way would be best.

Red Over a year ago

i edited the Question,this is not happening on run time,Niken suggested a method but its not suitable here.

Marshall Brekka Over a year ago

You should clarify what our solutions are missing, because as far as I can tell we have all suggested the same basic thing. So what is it we are missing? Just based on your question it still seems that the answers provided will work. Are you adding elements with the blog class after the user has saved css changes? Do you need the css to be saved so that if they refresh the page their changes will still be there?

Red Over a year ago

Sorry,the actual problem is i dont want to apply CSS here,i just want it as TEXT for future,i mean that i am creating CSS CLASSES here and saving it on the database,ur answer is good,if i need to apply the style on here,$('.blog').css({'property1':'value1','property2':'value2'}); will only add it dynamically,i need its static code,so that i can save.

|

Collectives™ on Stack Overflow

Append data to css class - jQuery string operation

4 Answers 4

1 Comment

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related