⇪

CSS y JavaScript

facebook-svg gplus-svg twitter-svg

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.


   







variables CSS