Tutoriales básicos de JavaScript

Objetos de JavaScript

Funciones de JavaScript

JS HTML DOM

BOM del navegador JS

Tutoriales básicos de AJAX

Manual de referencia de JavaScript

Cambio de atributos de elemento de JS DOM Cambio de contenido HTML de JS DOM

Cambio de CSS de JS DOM

HTML DOM permite que JavaScript obtenga y cambie el estilo (CSS) de los elementos HTML.

para cambiar el estilo de un elemento

Puede usarstyleAtributo que aplica estilos a un elemento HTML específico.

Para cambiar el estilo de un elemento HTML, utilice la siguiente sintaxis:

element.style.property　=　value

El siguiente ejemplo cambia<h1>Estilo del elemento:

Ejemplo

<!DOCTYPE　html>
<html>
<h1　id="demo">Propiedad de estilo DOM HTML</h1>
<script>
document.getElementById("demo").style.color　=　"blue";
</script>
</html>

Prueba y observa‹/›

Al hacer clic en el botón, este ejemplo cambia<h1>Estilo del elemento:

Ejemplo

<h1　id="demo">Propiedad de estilo DOM HTML</h1>
<button　onclick="myFunc()">Haga clic</button>
<script>
function　myFunc()　{
　　　document.getElementById("demo").style.color　=　"blue";
}
</script>

Prueba y observa‹/›

En este ejemplo, al hacer clic en el botón, también se cambia<h1>Estilo del elemento:

Ejemplo

<h1　id="demo">Propiedad de estilo DOM HTML</h1>
<button　onclick="document.getElementById('demo').style.color　=　'blue'>Haga clic</button>

Prueba y observa‹/›

para obtener información de estilo de un elemento

Asimismo, se puede usarstyleAtributo que aplica estilos a un elemento HTML.

El siguiente ejemplo aplica estilos a un elemento conid="demo"de un elemento para obtener información de estilo (border-top）：

Ejemplo

var　x　=　document.getElementById("demo").style.borderTop;

Prueba y observa‹/›

Nota:Al obtener la información de estilo de un elementostyleLa información de estilo en este atributo no es muy útil, ya que solo devuelve las reglas de estilo establecidas en el atributo style del elemento, y no devuelve las reglas de estilo provenientes de otras ubicaciones, como estilos incrustados en hojas de estilo, o hojas de estilo externas.

Para obtener los valores de todos los atributos CSS utilizados para representar un elemento, se puede usar lo siguiente:window.getComputedStyle()Método:

Ejemplo

let　para　=　document.querySelector('p');
let　compStyles　=　window.getComputedStyle(para);
para.innerHTML　=　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+='<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+='padding:　'　+　compStyles.getPropertyValue('padding');

Prueba y observa‹/›

para agregar una clase CSS a un elemento

También puedes usarclassNamepropiedad para obtener o establecer la clase CSS de un elemento HTML.

Ejemplo

document.getElementById("x").className = "para";

Prueba y observa‹/›

También puedes usar laclassListobtener, establecer o eliminar atributos CSS fácilmente desde un elemento.

El siguiente ejemplo muestra cómo<p>Agregar una clase a un elementoparaClase:

Ejemplo

var elem = document.getElementById("x");
elem.classList.add("para");

Prueba y observa‹/›

Agregar múltiples clases a<p>Elemento:

Ejemplo

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Prueba y observa‹/›

Desde<p>Eliminar una clase de un elemento:

Ejemplo

var elem = document.getElementById("x");
elem.classList.remove("para");

Prueba y observa‹/›

Cambiar entre dos clases<p>Elemento:

Ejemplo

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Prueba y observa‹/›

Cambiar una clase ("abrir") para crear un botón de navegación lateral:

Ejecutar código

Cambio de atributos de elemento de JS DOM Cambio de contenido HTML de JS DOM