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

Question

Wenn ich einen Stil definiert

.style1
{
   width: 140px;
}

kann ich es von einer zweiten Art verweisen?

.style2
{
   ref: .style1;
}

Oder gibt es eine Möglichkeit, über Javascript / jQuery?

--- Bearbeiten

Um das Problem zu klären, ich versuche, was Stil gelten für ein #x und #C definiert ist .x und .c ohne die CSS als CSS verändert wird Updates haben, die aus meiner Kontrolle sind.

Ich benutzen Breite, aber wirklich der Stil wäre etwas komplexer mit Schriftart, Rahmen und anderen Stilelementen sein angegeben werden.

mehrere Klassennamen angeben Arbeit tut, wenn der Stil auf eine Klasse angewandt wird, so dass ich bestehende Antworten als Antworten markieren würde, aber ich brauche den Stil zu ergreifen, um eine ID angewandt wird und auch an einen Klassenstil anwenden .. ., wenn das macht keinen Sinn.

Answer 1

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

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

Answer 2

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

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

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

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

edit: eigentlich Roberts Antwort könnte besser annähern die Methode, die Sie zu erreichen versuchen

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

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

Answer 3

Eine Möglichkeit, den gleichen Code für mehrere Blöcke ist die folgende verwenden:

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

Answer 4

Eine andere Möglichkeit ist vor -Verarbeitung Tool verwenden, wie weniger und sass. Dann, nachdem Sie die weniger / sass Datei kompilieren, wird es als normaler CSS zur Folge hat.

Hier ist die Dokumentation von weniger 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 5

Einige Optionen:

1. Generieren Sie Ihre CSS dynamisch, entweder on the fly oder wie Sie Ihre Stylesheets sind Authoring (IA Visual Studio-Makros verwenden Konstanten für Schriften, Zahlen zu implementieren und Farben - und Hell- / Dunkel Tönungen zu berechnen Farben). Dieses Thema wurde auf dieser Seite viel an anderer Stelle diskutiert.

2. Wenn Sie eine Reihe von Stilen, die 140px breit sind und Sie die Flexibilität haben, der diese Dimension für alle diese Arten zu ändern, könnten 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 6

Sprechen Sie über alle der berechneten Stile, die auf einem bestimmten Element bekommen und diejenigen mit einem zweiten Element anwenden?

Wenn das der Fall ist, ich denke, du wirst berechneten Stile durch ein Element des müssen durchlaufen und anschließend diejenigen zu Ihren anderen Elements' cssText Eigenschaften gelten sie als Inline-Stile zu setzen.

So 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 vereinfachen die oben als:

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 den obigen Code mit der Tatsache Vorbehalt, dass ich nicht sicher bin, ob die IEs ein CSSStyleDeclaration Objekt für eine Htmlelement Stil Eigenschaft wie Mozilla wird (das erste Beispiel) zurück. Ich habe auch nicht die über einen Test gegeben, so stützen sich auf sie als Pseudo-Code.

Answer 7

Ich habe versucht, diese gleiche Sache und fand diese Webseite (wie auch einige andere). Es gibt keine direkte Möglichkeit, 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 hierbei ist, dass Sie (wie ich) versuchen, die Dinge in einer logischen Art und Weise zu tun. (Dh: A-then-B-then-C)

Wie andere haben darauf hingewiesen - das funktioniert einfach nicht. Obwohl es sollte funktionieren und CSS sollten Sie auch viele andere Funktionen. Es ist nicht so dass Sie um eine Arbeit zu tun haben. Einige haben bereits gebucht, die jQuery Weg, dies zu umgehen, aber was Sie wollen, können mit einer geringfügigen Änderung 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 erzielt den gleichen Effekt - nur auf eine andere Weise. Anstatt zu versuchen, „a“ oder „b“ bis „c“ zuweisen - nur zuweisen „c“ zu „a“ oder „b“. Sie erhalten die gleiche Wirkung ohne den Rest des Codes zu beeinflussen.

Die nächste Frage, die in den Sinn Pop sollte, ist, „Kann ich das für mehrere CSS Elemente. (Wie font-size, font-weight, font-family?) Die Antwort ja ist. Fügen Sie einfach die“ .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>