9

WebページにHTMLを動的に挿入しています（ユーザーからのイベントを検出した後）。このhtmlにはいくつかのcssスタイルが必要ですが、jQueryを使用してそれを行う最もクリーンな方法は何でしょうか。私はWebサイト開発者ではないため、これらのルールを元のcssに追加することはできません。

formElementクラスを含め、スタイリングなしですでにいくつかのhtmlを挿入したと仮定します。<style>たとえば、ドキュメントに新しいブロックを書き込むことができます。

my_html =  '<style type="text/css">';
my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
my_html += '</style>';
my_html = $(my_html);
$('body').prepend(my_html);

または、次のcss方法を使用できます。

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

どのソリューションが最良/最もクリーンですか？

編集：

CSSにルールを直接追加することはできないのでcss、jQueryのメソッドを使用します。他のいくつかの関連する質問も解決策を提供します：

私はjQueryプラグインを実際に使用することはできませんが、可能であれば、確かにjQuery.Ruleを使用します。

貴重なご協力ありがとうございました。

4

6 に答える 6

10

特にプロパティに計算値または動的値が含まれていない場合は、css と js を混在させないでください。CSS クラスを定義するだけです。

.mystyle {
    display: block;
    width: 240px;
    position: relative;
    padding: 4px 0;
}

クラスを設定します

$('.formElement').addClass('mystyle');
于 2013-01-03T09:28:17.437 に答える
7

これ：

$('.formElement').css({
        'display': 'block',
        'width': '240px',
        'position': 'relative',
        'padding': '4px 0'
    });
于 2013-01-03T09:26:14.457 に答える
3

正直なところ、最善の方法はどちらでもないかもしれません。いずれかを選択する必要がある場合は、jquerycssメソッドを選択します。これは、よりクリーンであるという理由だけで、パフォーマンスを向上させ、コードをよりクリーンに見せるために、この代替方法を検討してください。

必要に応じて要素に追加するCSSクラスを作成します。例えば：

.formElementAlpha {  
  width:240px;
  padding:4px 0;
}
.formElementBravo {
  width:400px;
  height:50px;
  padding:20px 0;
  line-height:50px;
  font-size:30px;
}

次に、jqueryを使用して、必要なときに次のようにします。

$('.formElement').addClass('formElementAlpha');

また

$('.formElement[name="bigUsernameInput"]').addClass('formElementBravo');

cssある種のユーザーインタラクションや、JavaScript変数の値を使用して適用するスタイルを決定する必要があるその他の動的イベントに基づいて特定の要素を変更する必要がある場合は、jQueryメソッドを予約します。どのようにスタイルを設定するかはすでにわかっているようですので、CSSに作業を任せてください。

于 2013-01-03T09:36:18.483 に答える
2

2番目のオプション：

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

これは断然最もクリーンなソリューションです！

于 2013-01-03T09:26:54.910 に答える
2

jquery .css（propertyName、value）を使用します

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

これは、提供したソリューションの中で最高です。

ただし、すべてのプロパティが言うクラスを作成し、yourCSSその要素にクラスを追加します。

$('.formElement').addClass('yourCSS');
于 2013-01-03T09:27:07.620 に答える
1

HTML

<style id="customCSS"> ... </style>

JS

my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
$('#customCSS').html(my_html)
于 2015-07-28T14:35:02.917 に答える