1

JavaScript コード全体に CSS スタイル プロパティを「散りばめた」ものがあります。

以下に行の例を示します。

label_element.style.opacity = 0;

className の変更を除いて、コードからすべての CSS を移動することを計画していました。

たとえば、JavaScript を使用して一部の CSS を動的に変更する必要がある場合は、変更を className の変更に統合する予定です。

.new_class{
    label_element.style.opacity = 0;
}

したがって、CSS を動的に変更するために、すべての変更はクラスの変更で行われます。

div_el.className = "new_class";

このようにして、すべての CSS が CSS ファイルに残ります。JavaScript はクラス名にのみアクセスできます。

これが良い方法であることを確認/検証したかったのです。

4

5 に答える 5

2

クラス名を追加する代わりに、いくつかの単純なヘルパー関数を使用してクラスを追加/削除することをお勧めします。

Element.prototype.hasClass = function(name){
    return RegExp('(\\s|^)' + name, 'g').test(this.className);
};
Element.prototype.addClass = function(name){
    if(!this.hasClass(name))
        this.className += (this.className ? ' ' : '') + name;
};
Element.prototype.removeClass = function(name){
    this.className = name ? this.className.replace(RegExp('(\\s|^)' + name, 'g'), '') : '';
};

デモはこちら: http://jsfiddle.net/EdAEB/

于 2013-06-26T14:50:05.780 に答える
1

はい、おそらくコメントからわかるように、それが望ましいことです。ただし、わずかな注意事項が 1 つあります。

elem.className = 'foobar';

複数のクラスを扱う場合、理想的ではないかもしれません。

elem.className += ' foobar';

もちろん、次のような場合です。

window.addEventListener('click', function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'p' && target.className.test(/\btoggle\b/))
    {
        target.style.display = target.style.display === 'hidden' ? 'block' : 'hidden';
    }
}, false);

そのためにクラスを使用することもできますが、トグルは CSS3 で実行可能になると感じています。今のところ、古いブラウザーをサポートするために、このようなコードをそのままにしておくことができます。

于 2013-06-26T14:27:36.493 に答える
0

私はここで穀物に逆らう必要があります..

CSS ファイルにすべてのスタイルを含めることの主な欠点の 1 つは、スタイル値を計算する必要がある場合です。私たちが実際に遭遇した例の 1 つは、サイズ変更可能なダイアログ ボックスの例です。ブラウザー ウィンドウのサイズを変更したため、スタイル値 (幅と高さ) を計算する必要があります。スタイル値を計算する必要がある状況は他にもたくさんあります。そのため、最終的に、一部の CSS が CSS ファイルにあり、一部が Javascript にあるという状況が発生しました。これはきれいではありません。

より個人的なレベルでは、すべてのスタイルを CSS ファイルに保存すると、オブジェクト指向のカプセル化の原則が破られることがわかりました。特定のオブジェクトに特定のスタイルがある場合、それらの特定のスタイルはその特定のオブジェクトに保持する必要があります。私たちのプロジェクトが大きくなるにつれて、CSS ファイルは恐ろしく醜くなりました。

于 2013-06-26T15:10:00.013 に答える
-1

同意できない...

それはjavascriptが何をしなければならないかによって異なります。クラスがある方が良い場合もありますが、毎回ではありません。複雑なレイアウトは、css ファイルをスパムする可能性があります。JavaScript コードをきれいにしようとしていますが、少し考えてみてください。効果は反転することもできます。たとえば、ウィジェットとプラグイン。一部のプラグインには、独自の css ファイルが必要です。複数のファイルが必要なものもあります。ファイル構造がかなり混乱する可能性があります。そして、より多くの人が 1 つのプロジェクトに取り組むと、ファイル構造が複雑になり、クラス参照が多すぎるため、バグの保守、変更、または修復が難しくなります ...

私は、JavaScript で行うスタイル変更ごとに、これを個別に解決します。コードを読みやすく、保守しやすくすることは、厳密にすることよりも重要です。

于 2013-06-26T14:45:04.053 に答える