Gibt es eine Möglichkeit, einen vorhandenen CSS-Stil aus einem anderen CSS-Stil mit CSS oder Javascript zu referenzieren?

Question

Wenn ich einen Stil

.style1 
{ 
    width: 140px; 
} 

definiert haben kann ich es von einer zweiten Art verweisen?

.style2 
{ 
    ref: .style1; 
} 

Oder gibt es einen Weg über Javascript/jQuery?

--- Bearbeiten

das Problem zu klären, ich versuche, für eine #x und #C anzuwenden, was Stil ohne Änderung der CSS als CSS .x und .c definiert ist haben, Updates, die außerhalb meiner Kontrolle sind.

Ich verwendete Breite, aber wirklich würde der Stil etwas komplexer mit Schriftart, Rahmen und anderen Stilelementen sein, die spezifiziert werden. Die Angabe mehrerer Klassennamen funktioniert, wenn der Stil auf eine Klasse angewendet wird. Daher markiere ich vorhandene Antworten als Antworten, aber ich muss den Stil auf eine ID anwenden und ihn auch auf einen Klassenstil anwenden. .. wenn das irgendeinen Sinn ergibt.

Answer 1

Es gibt keine Möglichkeit, es mit CSS zu tun - es ist eine oft angeforderte Funktion, aber noch nicht in der Spezifikation enthalten. Sie können auch Sie es nicht direkt mit JS, aber es gibt eine Art von Hacky Abhilfe:

$('.style2').addClass ('style1'); 

Answer 2

Sie die gleiche Funktionalität erreichen können, indem sie Elemente mehrere Stile erben. Ex.

<p class="style1 style2">stuff</p> 

und dann würde Ihre CSS gehören zum Beispiel:

.style1 {width:140px;} 
.style2 {height:140px;} 

edit: eigentlich Roberts Antwort könnte besser annähern, welche Methode Sie

.style1, .style2 {width: 140px;} 
.style2 {height: 140px;} 

<p class="style2">i will have both width and height applied</p> 

Answer 3

Eine Möglichkeit, zu erreichen versuchen zu verwenden, Derselbe Code für mehrere Blöcke ist der folgende:

.style1, .style2 { width: 140px; } 

Answer 4

Einige Optionen:

1. dynamisch Generieren Sie Ihre CSS, entweder on the fly oder wie Sie Ihre Stylesheets sind Authoring (ich verwende ein Visual Studio-Makros Konstanten für Schriften, Zahlen und Farben zu implementieren - und berechne helle/dunkle Farbtöne). Dieses Thema wurde an anderer Stelle auf dieser Website ausführlich besprochen.

2. Wenn Sie eine Reihe von Stilen haben, die 140px breit, und Sie wollen die Flexibilität haben, der diese Dimension für alle diese Arten zu ändern, können Sie dies tun:

   div.FixedWidth {width:140px;} 
   div.Style1 {whatever} 
   div.Style2 {whatever} 
   

und

<div class="Style1 FixedWidth">...</div> 
    <div class="Style2 FixedWidth">...</div> 

Answer 5

Sprechen Sie darüber, alle berechneten Stile für ein bestimmtes Element zu erhalten und diese auf ein zweites Element anzuwenden?

Wenn das der Fall ist, denke ich, dass Sie die berechneten Styles eines Elements durchlaufen müssen und diese dann auf die cssText-Eigenschaften der anderen Elemente anwenden müssen, um sie als Inline-Stile festzulegen.

Etwas wie:

el = document.getElementById('someId'); 
var cStyle = ''; 
for(var i in el.style){ 
    if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';'; 
} 
$('.someClass').each(function(){ this.style.cssText = cStyle; }); 

Wenn Sie wissen, dass Sie nur mit einer endlichen Menge von CSS-Eigenschaften zu tun haben, können Sie die oben vereinfachen könnte:

el = $('#someId'); 
var styleProps = {'border-top':true,'width':true,'height':true}; 
var cStyle = ''; 
for(var i in styleProps){ 
    cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';'; 
} 
$('.someClass').each(function(){ this.style.cssText = cStyle; }); 

Ich werde Caveat Der obige Code mit der Tatsache, dass ich nicht sicher bin, ob die IEs ein CSSStyleDeclaration Object für eine style -Eigenschaft eines HTMLElements wie Mozilla zurückgeben werden (das erste Beispiel). Ich habe dem oben genannten auch keinen Test gegeben, also verlasse mich darauf nur als Pseudo-Code.

Answer 6

Eine andere Möglichkeit ist die Verwendung von Pre-Processing-Tool, wie weniger und sass. Dann, nachdem Sie die Less/Sass-Datei kompilieren, wird es als normales CSS resultieren.

Hier ist die Dokumentation von less und sass.

// example of LESS 

#header { 
h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
p { font-size: 12px; 
    a { text-decoration: none; 
    &:hover { border-width: 1px } 
    } 
    } 
} 


/* Compiled CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
border-width: 1px; 
} 

Answer 7

Ich habe das gleiche versucht und diese Webseite (sowie einige andere) gefunden. Es gibt keinen direkten Weg, dies zu tun. IE:

<html><head><title>Test</title><style> 
.a { font-size: 12pt; } 
.b { font-size: 24pt; } 
.c { b } 
</style></head><body> 
<span class='c'>This is a test</span></body></html> 

Does NICHT Arbeit. Das Problem hier ist, dass Sie (wie ich) versuchen, die Dinge in einer logischen Weise zu tun. (zB: A-dann-B-dann-C)

Wie andere schon angemerkt haben - das geht einfach nicht. Obwohl es funktioniert und CSS sollte eine Menge anderer Funktionen haben. Es ist nicht so, du musst arbeiten. Einige haben bereits den jQuery Weg gepostet, um dies zu umgehen, aber was Sie wollen, kann mit einer leichten Modifikation erreicht werden.

<html><head><title>Test</title><style> 
.a { font-size: 12pt; } 
.b,.c { font-size: 24pt; } 
</style></head><body> 
<span class='c'>This is a test</span></body></html> 

Dies erreicht den gleichen Effekt - nur auf eine andere Art und Weise. Anstatt zu versuchen, "a" oder "b" zu "c" zuzuweisen - weisen Sie einfach "c" zu "a" oder "b" zu. Sie erhalten den gleichen Effekt, ohne dass dies Auswirkungen auf den restlichen Code hat.

Die nächste Frage, die Ihnen in den Sinn kommen sollte, ist "Kann ich dies für mehrere CSS-Elemente tun. (Wie Schriftgröße, Schriftgewicht, Schriftfamilie?) Die Antwort ist JA. Fügen Sie einfach",. c „Teil auf jede der Dinge, die Sie es zu einem Teil und alle jene sein wollen‚Teile‘wird zu einem Teil von“ .c“

<html> 
<head> 
<title>Test</title> 
<style> 
.a { font-size: 12pt; } 
.b,.c { font-size: 24pt; } 
.d { font-weight: normal; } 
.e,.c { font-weight: bold; } 
.f { font-family: times; } 
.g,.c { font-family: Arial; } 
</style> 
</head> 
<body> 
<span class='c'>This is a test</span> 
</body> 
</html>