Cambiar estilo a un elemento sin usar getElementById

[zcriptz]

<script>
function fontSize(e, v){
    e.style.fontSize = v;
}
</script>

<span style="font-size:20px;cursor:pointer" onmouseenter="fontSize(this, '30px')" onmouseout="fontSize(this, '20px')">Texto</span>

Esta es una forma de cambiar el estilo sin getElementById con Javascript, hay más opciones.

La función fontSize que hice tiene dos parámetros, uno es el elemento y el otro es el valor que queremos ponerle al estilo font-size.

Al ponerle "this" le estamos enviando "esto", o sea que e (el parametro de la función) es igual al elemento span. (Porque se pone el cursor sobre él)

DEMO

Al poner el cursor arriba veremos que aumenta el tamaño del texto, y al sacarlo disminuye.

 

[MarkBurns]

Está bien si quieres una solución rápida.

Pero para consistencia en toda la plataforma y design system, es mejor añadir clases modificadores (BEM) y tener unos buenos SCSS. Para gustos colores.

Pero si que es verdad que ahorras líneas de código, y yo uso VueJS / React, y se hace de otra forma.

 

[zcriptz]

Está bien si quieres una solución rápida.

Pero para consistencia en toda la plataforma y design system, es mejor añadir clases modificadores (BEM) y tener unos buenos SCSS. Para gustos colores.

Pero si que es verdad que ahorras líneas de código, y yo uso VueJS / React, y se hace de otra forma.

Por eso subrayé algunas cosas.
Más que nada lo hice para que se aprenda lo básico.

En este caso solo apliqué cambio de estilo, pero se pueden hacer más cosas entendiendo "this".
Por eso solo es Javascript.