php - CSSクラスを別のクラスに動的に割り当てる

Question

あるCSSクラスのプロパティを別のクラスに割り当てることは可能ですか？CSSで実行できない場合は、サーバーサイドスクリプトを使用して変数を渡すことができます。

たとえば、.myclass1から.myclass20までのクラスのリストがあり、user7の場合は.myDefaultをmyClass7に置き換える必要があることがわかっている場合、どうすればよいですか？

Answer 1

jQueryでは、次のコードを使用できます。

$('.myDefault').addClass('myClass7');
$('.myClass7').removeClass('myDefault');

Answer 2

クラス内のすべてのプロパティを CSS の別のクラスに継承させたい。

JS によって両方のクラスが動的にオブジェクトに適用されるわけではありません。

これは CSS で直接行うことはできず、JS のアプローチでは実装にかなりの時間がかかります。

最良の選択は、より少ない cssを調べることです。

サーバー側またはクライアント側のいずれかで、必要なことを行います。

Answer 3

PHP を使用してこれを処理できます。例えば交換するだけ

<div class='myDefault'></div>

と

// you should have that info stored somewhere anyway :)
$userClass = 'myClass7';

// now just echo out the right class for the user
<div class="<?php echo $userClass ?>"></div>

Answer 4

jQuery を使用せずにクラスを交換する簡単な方法を次に示します: http://jsfiddle.net/imsky/mrKHB/

HTML:

<div id="test" class="big one sans phone">Hello world and </div>

CSS:

.one {background:blue;color:#fff}
.two {background:yellow;color:#000}
.sans {font-family:sans-serif}
.big {font-size:24px}
.phone:after {content:"phone!"}

JavaScript:

document.getElementById("test").onclick = (function(){
this.className = this.className.replace(/\bone\b/,"two");
});

Answer 5

これは直接的な答えではありませんが、設定を組み合わせたい場合は、複数のクラスを使用できます。

bigFont{
  font-size:150%;
}
errorBox{
  border:4px dashed red;
}
typMessage{
  padding:2px;
  margin:1px;
  overflow-y:auto;
}


<div class="typMessage">Hello World</div>

「errorBox」および/または「bigFont」クラスを要素に追加すると、CSS プロパティが「マージ」されます。