JavaScript Notas de la operación --DOM estilos CSS en línea

Un estilo CSS tres

Aquí Insertar imagen Descripción

En segundo lugar, poniendo en funcionamiento el estilo en línea CSS DOM

Modificar (conjunto) sintaxis de estilo

  • Elementos .style. Estilo Estilo nombre = valor

sintaxis de estilo de lectura

  • Elementos .style. Nombre Estilo

Por ejemplo:
1. Escribir una simple caja, más estilos CSS
de estilo CSS de la siguiente manera:

#box1{
	width: 200px;
	height: 200px;
	background-color: #FF0000;
}

Estilo Modificar 2. más un btn01

btn01.onclick=function(){
	var box1= document.getElementById("box1");
	
	//修改box1样式
	box1.style.width = "300px";
	box1.style.height = "300px";
	box1.style.backgroundColor="yellow";
};

3. además de un estilo de lectura btn02

btn02.onclick = function(){
	//读取box1的样式
	alert(box1.style.width);
}

notas:

  • nombre de estilo CSS contiene - nomenclatura en lugar de joroba, ir - la primera letra en mayúscula
    , como por ejemplo: background-color se convierte en backgroundColor

  • Estilo de la más importante, js no modifica los estilos originales
    tales como: background-color :! # FF0000 importante;

Tres, DOM lee el interior de estilo CSS y estilos externa

Girar aquí

Ha publicado 198 artículos originales · ganado elogios 94 · vistas 90000 +

Supongo que te gusta

Origin blog.csdn.net/shang_0122/article/details/104873433
Recomendado
Clasificación