Copie o código do código da seguinte forma:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="servidor">
<título></título>
<style type="texto/css">
.dia
{
cor de fundo: Branco;
}
.noite
{
cor de fundo:Preto
}
</estilo>
<linguagem script="javascript" type="text/javascript">
função operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "dia") {
divObj.className = "noite";
btnObj.value = "Acenda a luz";
} outro {
divObj.className = "dia";
btnObj.value = "Apague as luzes";
}
}
//Modifica em lote os atributos de estilo de divs, consistindo em vários estilos
//Método 1:
função métodoUm() {
var divObj = document.getElementById("divTeste");
divObj.style.backgroundColor = "azul";
divObj.style.border = "1px sólido vermelho";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "centro";
}
//Método 2:
function métodoDois() {
var divObj = document.getElementById("divTeste");
divObj.style.cssText = "cor de fundo:Azul; borda:sólido 1px vermelho; largura:300px; altura:200px; posição de fundo:centro";
}
</script>
</head>
<corpo>
<form id="form1" runat="servidor">
<div id="divContent">
<font color="red">Eu sou um div, bah bah bah! </font>
</div>
<input type="button" value="Apague as luzes" id="btnCommit" onclick="operStyle();"
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<h1>Modifique o estilo de divTest e opere vários atributos</h1>
<div id="divTeste" >
<font color="red">Modifique o estilo do divTest</font>
</div>
<input type="button" value="Modifique o estilo de divTest" onclick="methodTwo()" />
</form>
</body>
</html>
Quando usamos js para escrever estilos CSS, geralmente usamos os dois métodos a seguir:
Geralmente, quando usamos js para definir o estilo dos objetos de elemento, usaremos este formato:
Copie o código do código da seguinte forma:
var elemento = document.getElementById("id");
elemento.style.width=”20px”;
elemento.estilo.height=”20px”;
element.style.border=”sólido 1px vermelho”;
No entanto, o método acima tem uma desvantagem. Se houver mais estilos, haverá muito código e substituir o estilo do objeto por meio de JS é um processo típico de destruição e reconstrução do estilo original; aumentar a carga do navegador.
Existe um método cssText em js:
A sintaxe é: obj.style.cssText("estilo");
Podemos modificar o código acima para:
Copie o código do código da seguinte forma:
element.style.cssText=”largura:20px;altura:20px;borda:sólido 1px vermelho;”;
Este método de escrita pode tentar evitar vários refluxos da página e melhorar o desempenho da página.