Скопируйте код кода следующим образом:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="сервер">
<title></title>
<style type="text/css">
.день
{
цвет фона: Белый;
}
.ночь
{
цвет фона:Черный
}
</стиль>
<script Language="javascript" type="text/javascript">
функция оперСтиль() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "день") {
divObj.className = "ночь";
btnObj.value = "Включите свет";
} еще {
divObj.className = "день";
btnObj.value = "Выключите свет";
}
}
//Пакетное изменение атрибутов стиля элементов div, состоящих из нескольких стилей
//Метод 1:
функция методOne() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "синий";
divObj.style.border = "сплошной красный цвет 1 пиксель";
divObj.style.width = "300 пикселей";
divObj.style.height = "200 пикселей";
divObj.style.backgroundPosition = "центр";
}
//Метод 2:
функция методTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "цвет фона: синий; граница: сплошной 1 пиксель красный; ширина: 300 пикселей; высота: 200 пикселей; положение фона: центр";
}
</скрипт>
</голова>
<тело>
<form id="form1" runat="server">
<div id="divContent">
<font color="red">Я див, ба-бах-бах! </font>
</div>
<input type="button" value="Выключить свет" id="btnCommit" onclick="operStyle();" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<час />
<h1>Изменить стиль divTest и использовать несколько атрибутов</h1>
<div id="divTest" >
<font color="red">Изменить стиль divTest</font>
</div>
<input type="button" value="Изменить стиль divTest" onclick="methodTwo()" />
</форма>
</тело>
</html>
Когда мы используем js для написания стилей CSS, мы обычно используем следующие два метода:
Обычно, когда мы используем js для установки стиля объектов-элементов, мы будем использовать эту форму:
Скопируйте код кода следующим образом:
var element = document.getElementById("id");
element.style.width="20px";
element.style.height="20px";
element.style.border="сплошной красный цвет 1 пиксель";
Однако у вышеописанного метода есть недостаток: если стилей больше, то будет много кода, и переопределение стиля объекта через JS — это типичный процесс разрушения исходного стиля и его повторной сборки. увеличить нагрузку на браузер.
В js есть метод cssText:
Синтаксис: obj.style.cssText("стиль");
Мы можем изменить приведенный выше код, чтобы:
Скопируйте код кода следующим образом:
element.style.cssText="ширина: 20 пикселей; высота: 20 пикселей; граница: сплошная 1 пиксель красного цвета;";
Этот метод записи позволяет избежать многократной перекомпоновки страницы и повысить ее производительность.