CSS y JavaScript
Especificar estilos con JavaScript
En JavaScript podemos utilizar la propiedad style
para manipular el atributo style
de un elemento HTML, o para crear uno de nuevo, o sea: estilos inline. Por ejemplo si tenemos una lista <ul>
:
var ul = document.querySelector("ul");
Podemos especificar el valor del color de fondo ( background-color
) de esta manera:
ul.style.backgroundColor = "#6ab150";
En este caso escribimos las propiedades CSS en cammelCase
, ya que es una propiedad y el guión daría error en JavaScript.
Podemos conseguir casi lo mismo utilizando el método setProperty()
. En este caso, ya que la propiedad aparece entre comillas, utilizamos la misma sintaxis que en CSS ( "background-color"
).
ul.style.setProperty("background-color", "#6ab150");
De hecho, a diferencia del ejemplo anterior, setProperty
puede ser muy útil si queremos especificar el valor de una variable CSS ( custom properties ).
elemento.style.setProperty("--foo", "test");
Todo lo que hemos visto hasta ahora añade nuevas reglas CSS escribiendo en el atributo style.
También podemos especificar varias propiedades a la vez utilizando la propiedad cssTex
:
ul.style.cssText = "background-color:#6ab150;list-style:none;";
Si el elemento ( ul
– en este caso ) ya tiene un atributo style
, esto lo elimina, crea un nuevo atributo style
y añade las nuevas reglas CSS.
Asimismo podemos crear un nuevo atributo style
utilizando el método setAttribute
:
ul.setAttribute("style","background-color:#6ab150;list-style:none;");
Otra solución sería crear una nueva hoja de estilo y agregarla al <head>
, o manipular las hojas de estilo ya existentes.
Lea más acerca de como crear y manipular hojas de estilo con Javascript
Los estilos calculados de un elemento
Para recuperar el valor de una propiedad de un elemento, primero utilizamos el método de window getComputedStyle()
, que devuelve los estilos declarados ( CSSStyleDeclaration
) del elemento.
Por ejemplo si queremos recuperar los estilos de la lista ul
escribimos:
var estilos = window.getComputedStyle(ul, null);
Esto devuelve un objeto ( CSSStyleDeclaration
) con todas las propiedades CSS del elemento y sus valores. Si lo sacamos en consola ( console.log( estilos )
) obtenemos algo asi:
CSSStyleDeclaration alignContent:"normal" alignItems:"normal" alignSelf:"normal" alignmentBaseline:"auto" all:"" animation:"none 0s ease 0s 1 normal none running" animationDelay:"0s" animationDirection:"normal" animationDuration:"0s" animationFillMode:"none" animationIterationCount:"1" animationName:"none" . . .
Si, por ejemplo, queremos saber la altura de la lista tenemos que buscar el valor de la propiedad height
, y lo hacemos utilizando el método getPropertyValue()
:
var estilos = window.getComputedStyle(ul, null); var altura = estilos.getPropertyValue("height");
El resultado es una cadena de texto que en este caso puede tener este aspecto: "110.909px"
. Esto quiere decir que si necesitamos la altura para calcular algo, tenemos que extraer solo la parte numérica de esta cadena de texto.
Para esto podemos utilizar el método parseInt()
:
parseInt("110.909px");// que devuelve 110
o el método parseFloat()
parseFloat("110.909px");//que devuelve 110.909
Pero hay muchísimas más maneras de hacerlo.
Pseudo-elementos y javascript
Los pseudo-elementos ::before y ::after
El método getComputedStyle()
toma dos argumentos. El primer argumento representa el elemento cuyos estilos queremos recuperar.
var estilos = window.getComputedStyle(elemento[, pseudoElt]);
El segundo argumento es opcional y muchas veces aparece como null
.
var estilos = window.getComputedStyle(ul, null);
Si queremos saber los estilos de un pseudo-elemento ( por ejemplo el pseudo-elemento ::before
de ul
) utilizamos este segundo argumento de esta manera:
var estilos = window.getComputedStyle(ul, ":before");
. . .
console.log(estilos.getPropertyValue("color"));
Si queremos establecer o modificar los estilos de uno de estos pseudo-elementos las cosas se complican un poco: ya que los pseudo-elementos no tienen un atribulo style
tenemos que añadir estas reglas a una hoja de estilos:
Podemos crear una nueva hoja de estilo:
var nuevaHojaDeEstilo = document.createElement("style");
document.head.appendChild(nuevaHojaDeEstilo);
nuevaHojaDeEstilo.textContent = "ul::before{content:'muy lista'; }";
O podemos utilizar una hoja de estilo ya existente:
var hojasDeEstilo = document.styleSheets;
var ultimaHoja = hojasDeEstilo[hojasDeEstilo.length-1];
ultimaHoja.insertRule("ul::before{content:'muy lista'; }");
Lea más acerca de Hojas de estilo en JavaScript
El pseudo-elemento ::selection
En JavaScript el método getSelection()
devuelve un objeto con las propiedades del texto seleccionado por el usuario.
var seleccion = window.getSelection();
Podemos recuperar el texto seleccionado llamando el método toString()
:
console.log( seleccion.toString() )
Por ejemplo podemos utilizar los eventos "mousedown
" y "mouseup
" para sacar en consola el texto seleccionado por el usuario:
var sel=""; function seleccion(e) { sel = window.getSelection(); var str = sel.toString(); if(str.length > 0){ console.log(sel.toString());} } document.addEventListener("mousedown", function(){sel.empty();}, false); document.addEventListener("mouseup", seleccion, false);
Vea este ejemplo en codepen:
See the Pen getSelection by Gabi (@enxaneta) on CodePen.