Copie el código de código de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
.día
{
color de fondo: blanco;
}
.noche
{
color de fondo: negro
}
</estilo>
<script idioma="javascript" tipo="texto/javascript">
función operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "día") {
divObj.className = "noche";
btnObj.value = "Enciende la luz";
} demás {
divObj.className = "día";
btnObj.value = "Apaga las luces";
}
}
// Modifica por lotes los atributos de estilo de los divs, que constan de varios estilos
//Método 1:
función métodoUno() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "azul";
divObj.style.border = "rojo sólido 1px";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "centro";
}
//Método 2:
método de funciónDos() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "color de fondo: azul; borde: sólido 1 px rojo; ancho: 300 px; alto: 200 px; posición de fondo: centro";
}
</script>
</cabeza>
<cuerpo>
<formulario id="form1" runat="servidor">
<div id="divContenido">
<font color="red">Soy un div, ¡bah bah bah! </font>
</div>
<input type="button" value="Apagar las luces" id="btnCommit" onclick="operStyle();"
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hora/>
<h1>Modificar el estilo de divTest y operar múltiples atributos</h1>
<div id="pruebadiv" >
<font color="red">Modificar el estilo de divTest</font>
</div>
<input type="button" value="Modificar el estilo de divTest" onclick="methodTwo()" />
</formulario>
</cuerpo>
</html>
Cuando usamos js para escribir estilos css, generalmente usamos los dos métodos siguientes:
Generalmente, cuando usamos js para establecer el estilo de un objeto elemento, usaremos esta forma:
Copie el código de código de la siguiente manera:
elemento var= document.getElementById("id");
elemento.estilo.width=”20px”;
elemento.estilo.height=”20px”;
element.style.border=”sólido 1px rojo”;
Sin embargo, el método anterior tiene una desventaja: si hay más estilos, habrá mucho código; y anular el estilo del objeto a través de JS es un proceso típico de destrucción del estilo original y reconstrucción. aumentar la carga del navegador.
Hay un método cssText en js:
La sintaxis es: obj.style.cssText("estilo");
Podemos modificar el código anterior para:
Copie el código de código de la siguiente manera:
element.style.cssText=”ancho:20px;alto:20px;borde:sólido 1px rojo;”;
Este método de escritura puede intentar evitar múltiples reflujos de la página y mejorar el rendimiento de la página.