javascript - para - tipos de hojas de estilo
¿Hay alguna manera de hacer referencia a un estilo CSS existente desde otro estilo CSS utilizando CSS o javascript? (7)
Algunas opciones:
Genere su CSS dinámicamente, ya sea sobre la marcha o mientras está creando sus hojas de estilo (utilizo las macros de Visual Studio para implementar constantes para fuentes, números y colores, y para calcular los colores claros / oscuros de los colores). Este tema ha sido muy discutido en otro lugar en este sitio.
Si tiene una cantidad de estilos de 140 píxeles de ancho y desea tener la flexibilidad de cambiar esa dimensión para todos esos estilos, puede hacer esto:
div.FixedWidth {width:140px;} div.Style1 {whatever} div.Style2 {whatever}
y
<div class="Style1 FixedWidth">...</div>
<div class="Style2 FixedWidth">...</div>
Si tengo un estilo definido
.style1
{
width: 140px;
}
¿Puedo hacer referencia a partir de un segundo estilo?
.style2
{
ref: .style1;
}
¿O hay alguna manera a través de javascript / jQuery?
--- Editar
Para aclarar el problema, intento aplicar cualquier estilo definido para #x y #c a .x y .c sin alterar el CSS, ya que el CSS tendrá actualizaciones que están fuera de mi control.
Usé el ancho, pero realmente el estilo sería algo más complejo con la fuente, el borde y otros elementos de estilo especificados.
Especificar varios nombres de clase funciona cuando el estilo se aplica a una clase, por lo que marcaré las respuestas existentes como respuestas, pero debo aplicar el estilo aplicado a una identificación y también aplicarlo a un estilo de clase ... si eso tiene sentido
No hay forma de hacerlo con CSS: es una función que se solicita con frecuencia, pero que aún no está incluida en la especificación. Tampoco puedes hacerlo directamente con JS, pero hay una especie de solución hacky:
$(''.style2'').addClass (''style1'');
Una forma de usar el mismo código para varios bloques es la siguiente:
.style1, .style2 { width: 140px; }
puede lograr la misma funcionalidad permitiendo que los elementos hereden múltiples estilos. ex.
<p class="style1 style2">stuff</p>
y luego su css incluiría, por ejemplo:
.style1 {width:140px;}
.style2 {height:140px;}
editar: en realidad, la respuesta de Robert podría aproximarse mejor al método que está tratando de lograr
.style1, .style2 {width: 140px;}
.style2 {height: 140px;}
<p class="style2">i will have both width and height applied</p>
¿Estás hablando de obtener todos los estilos computados establecidos en un Elemento en particular y aplicarlos a un segundo Elemento?
Si ese es el caso, creo que vas a necesitar iterar a través de los estilos computados de un Elemento utilizando y luego aplicarlos a las propiedades cssText de tus otros Elementos para establecerlos como estilos en línea.
Algo como:
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; });
Si sabe que solo tratará con un conjunto finito de propiedades de CSS, puede simplificar lo anterior como:
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; });
Advertiré el código anterior con el hecho de que no estoy seguro de si los IEs devolverán o no un objeto CSSStyleDeclaration para una propiedad de estilo de HTMLElement como lo hará Mozilla (el primer ejemplo). Tampoco le he dado una prueba a la de arriba, así que confía en ella solo como pseudocódigo.
Estaba intentando lo mismo y encontré esta página web (y algunas otras). No hay una manera DIRECTA de hacer esto. ES DECIR:
<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>
NO funciona El problema aquí es que (como yo) estamos tratando de hacer las cosas de manera lógica. (es decir: A-then-B-then-C)
Como otros han señalado, esto simplemente no funciona. Aunque DEBERÍA funcionar y CSS DEBERÍA tener muchas otras características también. No es así, tienes que trabajar mucho. Algunos ya han publicado la forma de jQuery para evitar esto, pero lo que desea se puede lograr con una ligera modificación.
<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>
Esto logra el mismo efecto, solo de una manera diferente. En lugar de intentar asignar "a" o "b" a "c", simplemente asigne "c" a "a" o "b". Obtienes el mismo efecto sin que afecte al resto de tu código.
La siguiente pregunta que debe aparecer en su mente es "¿Puedo hacer esto para múltiples elementos de CSS (como font-size, font-weight, font-family?) La respuesta es SÍ. Solo agregue la parte", .c "en cada una de las cosas de las que quieres que forme parte y todas esas "partes" se convertirán en parte de ".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>
Otra forma es utilizar la herramienta de preproceso, como less y sass. Luego, después de compilar el archivo less / sass, se obtendrá como css normal.
Aquí está la documentación de less y 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;
}