0

私は初心者のプログラマーであり、デザインに関する知識がほとんどない大学生です。Twitter のようなマイクロブログ Web サイトを開発していて、Twitter のようなプリロードされたスタイル (またはテーマ) を使用したいのですが、同じ機能を持つ Web サイトのページソースを見ましたが、異なる CSS ファイルを使用していないようです。よくわかりません。私の質問は、これを私のウェブサイトにどのように適用できますか? あまり詳しくないので基本から教えてください！前もって感謝します。！

4

2 に答える 2

1

さて、最初にあなたはあなたのユーザーにいくつかの変更をする能力を与える必要があるでしょう。あなたがすでにそれを持っているとしましょう。

必要なのは、ユーザーが指定できるもの（またはいくつかのデフォルトがあるもの）を除くすべてのルールとスタイルを含むベースCSSファイルです。

ユーザーがルールを指定した後、cssファイルを生成し、それをユーザーフォルダー（またはデータベースですが、お勧めしません）に保存し、誰かがログインしたときに、ベースのcssファイルに加えてそのcssをロードします。ユーザーのプロファイル。

于 2013-02-16T13:55:13.767 に答える
1

おそらく、変更されないものの束を定義する中央のCSSファイルと、「テーマ」を提供するセカンダリCSSファイルがあります。テーマごとに1つずつ、いくつかのセカンダリファイルがあります。linkページを作成するときは、それらのファイルの1つの要素のみを含めます。

オンザフライでテーマを変更できるようにする場合はhref、そのlink要素のを変更することでそれを行うことができます。

したがって、たとえば、次のように仮定すると、次のlinkようになります。

<link id="themeStyle" href="green.css" rel="stylesheet">

次に、このコードはそれを変更します：

document.getElementById("themeStyle").href = "blue.css":

完全な例：ライブコピー| ソース

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <link id="themeStyle" href="/acofoy/1" rel="stylesheet">
</head>
<body>
  <div id="group">
  <div><label><input name="theme" type="radio" value="1" checked>Green</label></div>
  <div><label><input name="theme" type="radio" value="2">Blue</label></div>
  <div><label><input name="theme" type="radio" value="3">Red</label></div>
  </div>
</body>
</html>

JavaScript：

(function() {

  var buttons = document.getElementById("group").getElementsByTagName("input");
  var index;

  for (index = 0; index < buttons.length; ++index) {
    buttons[index].onclick = setStyle;
  }

  function setStyle() {
    document.getElementById("themeStyle").href = "/acofoy/" + this.value;
  }

})();

注：JSBinを使用していたため、値には名前ではなく数字を使用しました。もちろん、実際には名前（、、、など）を使用green.cssしblue.cssますred.css。

于 2013-02-16T13:55:28.963 に答える