cssクラスにデータを追加する - jQuery文字列操作

次のHTMLをご覧ください。編集：CSSのクラスのブログ "をご覧くださいHTML部分cssクラスにデータを追加する - jQuery文字列操作

<div id="html_editor"> 

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

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

を更新しましたが、私はJS/jQueryの経由そのクラスにいくつかの他の値を追加します。実際にはHTMLタグのエディターでbodyタグユーザーが 'blog'要素を選択しているので、ユーザーにブログのCSSを設定したい、ユーザーがテキスト領域のCSSを変更する、その「ブログ」クラスにデータを追加/書き換えます。

例：私は

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

      }

にその「ブログ」CSSクラスを変更することがどのように私はこれを達成することができますので、後に次の

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

のようなクラスを設定し、ユーザ？ jQueryを使用する方法はありますか？

更新：この画像を確認してください。

ありがとうございます。

出典

2011-10-22 Red

あなたは、これはテキストエリアの値を取り、JavaScriptでそれを解析し、必要ならば、今では

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

のようにjQueryを使って値を適用するよう、リアルタイムでそのように簡単に起こるようにしたい場合これらの変更を永久に保存するには、新しいcss値をサーバーに送信し、それらをデータベースなどに格納する必要があります。

EDIT：データベースに保存するには...

あなたはそうのようなテキストフィールドから値を取得することができます。 var cssVal = $（ '＃textfieldid'）。val（）;

次に、jQuery ajax関数を使用して新しい値をサーバーに送信します。私は、あなたがどこでもオンラインデータベースのチュートリアルを見つけることができ、この内容のすべてに行くつもりはありませんが、その後、あなたが使用してサーバーに送信されたテキストフィールドの値を取りたい

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

jQueryを開き、cssルールのプロパティを格納するデータベーステーブルに保存します。

ページを再生成すると、データベースから新しいCSS値を取得するだけです。このようなHTMLのために

出典

2011-10-22 05:42:17

いいえ、これは私が必要とするものではありません、私はthtブログクラスの2つのスコープに日付を追加したいと思います。 – Red

それはどうしているのか分かりませんが、実行時にブログクラスを持つ要素に新しいスタイルが適用されます。しかし、ブログクラスで新しい要素を追加するつもりなら、nikensの方法が最適でしょう。 –

私は質問を編集しましたが、これは実行時には起こっていませんが、Nikenは方法を提案しましたが、ここでは適切ではありません。 – Red

：

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

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

が、これはJS試してみてください：

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

それは、以前のルールよりも優先されますので、これは非常に効率的ではありませんが、あなたは一般的な方法を得ることができます。

JSFiddle here

出典

2011-10-22 06:00:09 nikan

ありがとう、これは私が必要なものですが、私の考え方を変えました[あなたの最後の行]、主な問題は、ユーザーがスタイルのためにIDを置かないことです。データベースにCSS値を保存して、オンデマンドで検索するデータベース操作をしましょう... – Red

私は先に行って、私はしばらくの間でJavaScriptを行っていないと私はそれをやってみると思ったので、次の試験を行いました。最初のメソッドはString.splitを使用して、テキストエリアの入力と2番目の基本正規表現を解析します。 1行に2つ以上の文がある場合、正規表現は失敗します。彼らはどちらもネイティブCSSよりもユーザーに構文上の負担をかけるので、次のようになります。

あなたはニカンが提案したことをすべきだと思います。 jQueryを使って

<!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>

出典

2011-10-22 07:00:54 mqsoh

現在のスタイルにアクセスし、それを変更するのは簡単です：、テキストエリア内のすべてで動作しますか「緑の背景」：「白」を書いてみ

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

ブラウザ。ユーザーが終わったら$（ "＃style"）。html（）を使って現在のCSSを取得してください。

EDITED：更新リンク...このようにしますか？

出典

2011-10-22 07:45:30

更新された質問を確認してください。 – Red

cssクラスにデータを追加する - jQuery文字列操作

答えて

関連する問題