0

HTML ノードを作成し、CSS スタイルを適用します。シンプルな要素を使えば簡単です:

$('<div>').css("color","red")

私の場合、次のようなより複雑な要素を挿入したいと思います。

<div id="foo">
  <span class="bar"> foo </span>
  <span class="baz"> bar </span>
</div>

CSSで：

#foo {                                                                       
  ...                                                                        
}                                                                            

#foo .bar {                                                                  
  ...                                                                        
}                                                                            

#foo .baz {                                                                  
  ...                                                                        
}

ノードごとに個別に HTML コードとスタイルを設定したくありません。HTML と CSS 全体を 2 つの文字列に格納し、それらの文字列を使用してノードを作成したいと思います。理想的には、そのようなもの：

html_blob = '<div> id="foo"> ... </div>'
css_blob = '#foo {... } ... #foo .baz {...}'

new_element = $(html_blob).apply_css_from_string(css_blob)

Crossriderを使用して拡張機能を作成しましたが、ポップアップを動的に作成する必要があります。

4

3 に答える 3

3

どうですか：

$(someelement).append(html_blob);
$('head').append('<style id="tempstyle">' + css_blob + '</style>');

後で削除する場合:

$('#tempstyle').remove();
于 2012-11-01T11:09:25.580 に答える
1

これは私が理解したことの答えです：

 $("#top_element").append(html_blob);

ここで、css がスタイルシート自体の前に存在する場合、または以下のようにして動的に追加することができます。

$("head").append("<style>"+css_blog+"</style>")
于 2012-11-01T11:11:07.493 に答える
0

なぜあなたはこれをしたいのですか、またはあなたが達成したいことを私は得ていません.

ただし、繰り返し HTML コントロールのレンダリングを制御する必要がある場合。jQuery テンプレートをご覧ください。

jQuery テンプレートは、繰り返される html コンテンツに対する優れた制御を提供します。

// Convert the markup string into a named template
// you can declare your string template like this
$.template( "summaryTemplate", "<li>${Name}</li>" );

function renderList() {
    // Render the movies data using the named template: "summaryTemplate"
    $.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}
于 2012-11-01T11:16:09.583 に答える