4

これは、問題固有の質問というより一般的な練習問題ですが、私が言いたいことの例を挙げます。CSS で制御でき、Javascript でもできることはたくさんありますが、頼りになるものはどれですか?

例: ナビゲーションに 4 つのボタンがあり、関連付けられているセクションが表示されているときに「選択済み」のクラスが与えられます。したがって、ボタンごとに CSS ステートメントを作成することもできます (または、ミックスインを使用して Sass に実行させることもできます)。

#home-butt.selected{
background-image: url(images/home-up.png);}

#about-butt.selected{
background-image: url(images/about-up.png);}

#work-butt.selected{
background-image: url(images/work-up.png);}

#contact-butt.selected{
background-image: url(images/contact-up.png);}

Orrr 私は同じことをするために JavaScript で何かを書くことができます。（*そこからプルできるように、画像に画像名と一致するタイトル属性を付けました）。

title = $(this).attr('title');
$(this).find('img').css("background-image", 
"url(" + 'images/' + (title) + '-up.png' + ")");

だから私の質問は、どちらを使うのが良いですか? コードの行数が少ないので、JavaScriptですか？または、CSS incase javascript が無効になっていますか? それとも、常に正しい答えや間違った答えがあるとは限らない、非常に状況に応じた質問ですか?

ご意見、反論大歓迎です！

4

8 に答える 8

5

「どちらがより頼りになりやすいですか？」というあなたの質問に答えるために。

CSS には特定の目的があることに注意してください。アプリケーションに外観を適用します。一方、JavaScript は主にアプリ のフィールです。スタイルを編集するときは、常にJavaScript よりも CSS を優先してください。

JavaScript を使用してスタイルを変更する必要があるのは、動的アプリケーションがあり、未知の変数に基づいてスタイルを変更する必要がある場合だけです。それでも、CSS を使用するだけで多くのことを実現できます。

また、jQuery を使用していることにも注意してください。jQuery のコンストラクターについて考えてみましょう。それはCSSセレクターです。

CSS 疑似クラスの概念が導入されたため、CSS でスタイルに関して達成できないことはほとんどありません。

于 2013-08-08T14:11:30.417 に答える
2

多くの場合、Javascriptの開発によって私が達成しようとしていることがはるかに簡単になり、CSSによってそれが実現される場合もあります。

" 最終的に、各「言語」には Web 開発において適切な場所があり、賢明に使用することで、開発とユーザー エクスペリエンスの両方を向上させることができます。それらの使用法を学び (経験学習をお勧めします)、賢く適用してください。私の経験では、次のような石のルールを設定します。 「CSSソリューションが存在する場合はJSを使用しないでください」（言い換え）が実際の世界で最高になることはめったにありません.

レイアウトを扱う場合はCSSを使用し、ルック アンド フィールを作成する場合はCSSを使用し、アニメーションを行う場合はCSS3を使用します。

イベント ハンドラーをアタッチするか、ユーザー入力に反応する場合は、JavaScriptを使用します。

于 2013-08-08T14:14:35.200 に答える
1

通常の答えは、可能な場合は CSS を使用することです。これは、JavaScript を無効にしても機能し、要素を参照する前に DOM で要素が使用可能になるのを待つなどの問題に対処する必要がないためです。

しかし、場合によっては異なります。それを念頭に置いて：

  • 変更するセレクターまたはプロパティによっては、ブラウザーの互換性に問題がある場合があります。

  • 例のように画像を変更している場合、新しい画像が読み込まれている間に画像がちらつくことがあります。スプライト画像を使用するか、JavaScript で画像をプリロードすることで、これを回避できます。

于 2013-08-08T14:15:47.540 に答える
1

一般的な経験則として、スタイリングには CSS を使用し、JavaScript は「ページを生き生きとさせる」ためだけに使用します。

したがって、JavaScript の最適かつ最も理想的な使用法は、要素からクラス (CSS が依存しているクラス) を追加および削除することです。

于 2013-08-08T14:38:31.860 に答える
1

CSS は JavaScript よりもはるかに高速であるため、通常は CSS を使用します。また、JavaScript が無効になっているユーザーもいるでしょう。これらのユーザーは、js 関数に依存している場合、強化されたプレゼンテーションを見ることができません。

于 2013-08-08T14:12:50.983 に答える
0

この単純なタスクを実行するためにライブラリをロードするjQuery必要はありません。また、背景画像を img タグに適用するために JavaScript に依存する必要もありません。

CSS で適切に実行でき、すべてのブラウザーで動作する場合は、CSS で実行する必要があります。

Javascript は、CSS がすべてのブラウザーに提供できないインタラクションまたはアニメーションを必要とする、より高度または複雑なタスク用です (クロスブラウザーの互換性の問題のため、caniuse.com を確認してください)。

あなたの例では、.selected属性がたとえばjavascriptによって動的に与えられている場合:

makeSelected(elm)
{
document.getElementById(elm).className='selected';
}

.selected次に、javascript を介して画像を追加する代わりに、CSS でスタイリングを個人的に追加します。

.selectedJavaScript ではなく、現在のページに基づいて追加する場合は、CSS を使用することをお勧めします。

于 2013-08-08T14:12:33.793 に答える