marc m
¿Es algo así posible en CSS?
<table>
<tr>
<td id="elementOne">elementOne</td>
<td id="elementtwo">elementtwo</td>
</tr>
</table>
<div style="width: calc(document.getElementById(elementOne).width)"></div>
Para que el div sea siempre del mismo ancho que elementOne
.
¿Existe tal característica en CSS, usando calc() o algún otro medio?
simon riget
Utilice variables CSS:
<style>
:root { --width: 100px; } /* Set the variable --width */
table td{
width: var(--width); /* use it to set the width of TD elements */
border: 1px solid;
}
</style>
<table>
<tr>
<td class="tab">elementOne</td>
<td class="tab">elementtwo</td>
</tr>
</table>
<!-- reuse the variable to set the width of the DIV element -->
<div style="width: var(--width); border: 1px solid;">Element three</div>
También puede usar variables en la función calc():
<div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>
-
Tenga en cuenta que las variables CSS no se admiten muy bien en IE y Edge (y muchos otros navegadores más pequeños); caniuse.com/#feat=css-variables
– cuidado ahora1
10 de abril de 2017 a las 22:47
-
Gracias, esto es exactamente lo que necesitaba.
– Sasino
23 de abril de 2022 a las 6:36
León
No, no es posible con CSS.
Para eso tendrás que usar JavaScript (document.getElementById(elementOne).offsetWidth
o similar, dependiendo exactamente del ancho que esté buscando). Calc es usó para hacer matemáticas, no para ejecutar scripts. No hay forma de poner JS en una declaración CSS, como está tratando de hacer.
Para obtener más ayuda sobre el bit JS, consulte ¿Cómo recupero el ancho y el alto reales de un elemento HTML?
Editar: para obtener algunos antecedentes sobre por qué sería una mala idea implementar esto en CSS, consulte Cálculo de valor para CSS (TL; DR: se ha intentado. Las cosas explotaron)
Sí. Hay 2 formas posibles de hacer esto con CSS (aunque no con calc):
1) Si sabe cuántas columnas tiene, simplemente use% (es decir, 50% para 2 columnas)
2) Si no sabe cuántas columnas tiene o tal vez no pueda usar % para cualquier caso de uso que pueda tener, entonces puede usar caja flexible. Según el objetivo de compatibilidad de su navegador, puede combinar la sintaxis “antigua” y “nueva” para obtener resultados sorprendentes.
No, no existe tal función (AFAIK, algo así ha sido compatible con IE Hasta que versión 7) pero tiene una característica aún más poderosa: JavaScript.
– Adriano Repetti
15 de abril de 2014 a las 6:57
esto fue llamado
expression()
en IE, y fue una mala idea: stackoverflow.com/questions/527861/…– león
15 de abril de 2014 a las 7:06