1つのCSS属性に複数の値を設定する

CSS IDの単一の属性に2つの値を設定できますか？1つのCSS属性に複数の値を設定する

高さ：12em;高さ：12rem。

については、単一のIDですか？ CSSでこれを行うことは可能ですが、javascriptで高さを変更し、両方の値を1つの属性に設定して、 'em'が 'rem'をサポートしていないブラウザのフォールバックとして機能するようにします。

例：

function updateHeight() { 
 
    var testElem = document.getElementById("testId"); 
 
    testElem.style.height = "12em"; 
 
    testElem.style.height = "12rem"; 
 
    //testElem.style.height = "12em; 12rem;"; doesn't work, applies "12em" 
 
}

#testId { 
 
    height: 8em; 
 
    height: 8rem; 
 
    background-color: black; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <meta charset="utf-8" /> 
 
</head> 
 

 
<body> 
 
    <div id="testId"> 
 
    BlaBla 
 
    </div> 
 
    <button onclick="updateHeight()">Bla</button> 
 
</body> 
 

 
</html>

出典

2016-06-19 marrem97

私はあなたがそう書くことができると思いますが、適用される唯一のバージョンは、あなたが達成しようとしている最後のものでしょうか？ – gevorg

何百もの値を持つことができますが、同じセレクタを使用する場合は、最後のものだけが適用されます。 –

'rem'をサポートしていないブラウザではフォールバックが必要です。 – marrem97

あなたは

function updateHeight() { 
 
    var testElem = document.getElementById("testId"); 
 
    testElem.classList.add('high'); 
 
}

#testId { 
 
    height: 8em; 
 
    height: 8rem; 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
#testId.high { /* remember that ID is more specific than class */ 
 
    height: 12em; 
 
    height: 12rem; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <meta charset="utf-8" /> 
 
</head> 
 

 
<body> 
 
    <div id="testId"> 
 
    BlaBla 
 
    </div> 
 
    <button onclick="updateHeight()">Bla</button> 
 
</body> 
 

 
</html>

または値が動的である場合、あなたはおそらくCSSのカスケーディングをサポートすることができるようにスタイルタグを挿入する必要があると思います代わりにクラスを使用することができます

function updateHeight() { 
 

 
    var value = 12; // or something dynamic 
 
    var styles = '#testId {height: '+value+'em; height: '+value+'rem;}'; 
 
    var tag  = document.createElement('style'); 
 

 
    tag.innerHTML = styles; 
 

 
    document.querySelector('head').appendChild(tag); 
 

 
}

#testId { 
 
    height: 8em; 
 
    height: 8rem; 
 
    background-color: black; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <meta charset="utf-8" /> 
 
</head> 
 

 
<body> 
 
    <div id="testId"> 
 
    BlaBla 
 
    </div> 
 
    <button onclick="updateHeight()">Bla</button> 
 
</body> 
 

 
</html>

出典

2016-06-19 19:41:00 adeneo

私はこれと一緒に行くと思う、ありがとう！ – marrem97

あなたは大歓迎です！ – adeneo

はい、できます。これはCSS Cascadeによって定義される：

各プロパティ宣言applied to an elementは要素に関連するプロパティの declared valueに寄与する。

これらの値はcascadeで処理され、1つの "winning value"が選択されます。

cascaded valueはthe cascadeの結果を表します。それは（ output of the cascadeで最初にソートされる）カスケードに勝つことdeclared valueあります。

あなたは

height: 8em; 
height: 8rem;

を使用している場合次に、プロパティheightのための2つの宣言された値があるでしょう：8emと8rem。後者はカスケードになり、カスケード値になります。

一部のブラウザではそのうちの1つをサポートしていない場合は、他の1つだけが宣言された値になり、カスケードを獲得します。

一部のブラウザではサポートされていないブラウザがある場合、カスケードの出力は空のリストになり、カスケード値はありません。 specifiedの値はdefaultingプロセス（この場合はinitial value）の結果となります。heightはinherited propertyではないためです。

ただし、JavaScriptでは問題があります。 プロパティはCSSのプロパティ名の大文字と小文字を区別一致する場合

：.styleでキャメルケースIDL特性によってフード下で使用setPropertyは、既存の宣言を上書きset a CSS declarationアルゴリズムを使用して宣言の宣言では、宣言は、それをCSS 宣言にします。
そうでない場合は、プロパティ名とプロパティに宣言を新しいCSS宣言を追加し、宣言はそのCSS宣言することてみましょう。
代わりにキャメルケースIDLの使用cssText属性：
testElem.style.cssText += "; height: 12em; height: 12rem; "; 
は、それを設定した後、スタイルをチェック

は、いくつかの回避策があります。空の文字列を取得した場合、認識されなかったことを意味します。

testElem.style.height = "12rem"; 
if(!testElem.style.height) testElem.style.height = "12em";

インラインスタイル宣言でスタイルを設定しないでください。代わりに新しいスタイルシートを作成するか、要素にクラスを追加して既存のスタイルシートからCSSをトリガーします。

出典

2016-06-19 19:31:24 Oriol

そうです、私はjavascriptでスタイルを変更したいのですが、それは1つのスタイルだけを適用するだけです。 – marrem97

OK、私はその質問を誤解しました。私は私の答えを更新しました。 – Oriol

1つのCSS属性に複数の値を設定する

答えて

関連する問題