1. Частично изменить стиль
Существует три типа: изменение прямого стиля, изменение имени класса и изменение cssText. Следует отметить следующее:
Обратите внимание на капитализацию:
JavaScript очень чувствителен к регистру. Имя класса не может писать «N» как «n», а cssText не может писать «T» как «t», иначе эффект не будет достигнут.
Метод вызова:
Если вы измените имя класса, заранее объявите класс в таблице стилей, но не следуйте стилю при вызове. Написание типа document.getElementById('obj').style.className="..." неправильно! Его можно записать только так: document.getElementById('obj').className="…"
Изменить CSSText
Но если вы используете cssText, вам необходимо добавить стиль. Правильный способ написания: document.getElementById('obj').style.cssText=”…”
Мне не нужно говорить об изменении прямого стиля, просто не забудьте записать конкретный стиль, например.
Скопируйте код кода следующим образом:
document.getElementById('obj').style.backgroundColor="#003366"
2. Глобально изменить стиль
Обычно мы можем добиться переключения стилей веб-страницы в реальном времени, изменив значение href стиля внешней ссылки, то есть «изменив стиль шаблона». На данный момент нам сначала нужно указать идентификатор цели, которую необходимо изменить, например:
<link rel = "таблица стилей" type="text/css" id="css" href="firefox.css" />
Очень просто позвонить, например
<span on click="javascript:document.getElementById('css').href = 'ie.css'">Нажмите меня, чтобы изменить стиль</span>
Новички часто не знают, как писать определенные стили CSS на JavaScript, а иногда в разных браузерах требования различаются. Например, float записывается как styleFloat в IE и cssFloat в FIREFOX, что требует накопления всеми участниками. Поиск «ccvita javascript» в Google может развеять ваши сомнения.
базовые знания
Обычно существует три способа вызова таблиц стилей на веб-страницах.
Первый: Ссылка на внешний файл таблицы стилей (Linking to a Style Sheet)
Сначала вы можете создать внешний файл таблицы стилей (.css), а затем использовать объект ссылки HTML. Примеры следующие:
Скопируйте код кода следующим образом:
<голова>
<title>Название документа</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
В XML вы должны добавить его в область объявления, как показано в следующем примере:
Скопируйте код кода следующим образом:
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Второй тип: определение объекта внутреннего блока стиля (внедрение блока стиля).
Вы можете вставить
блокировать объект. Методы определения см. в синтаксисе таблицы стилей. Примеры следующие:
Скопируйте код кода следующим образом:
<html>
<голова>
<title>Название документа</title>
<style type="text/css">
<!--
тело {шрифт: 10pt "Arial"}
h1 {шрифт: 15pt/17pt «Arial»; толщина шрифта: жирный; цвет: темно-бордовый};
h2 {шрифт: 13pt/15pt «Arial»; шрифт: жирный; цвет: синий};
р {шрифт: 10 пт/12 пт «Arial» цвет: чёрный}
-->
</стиль>
</голова>
<тело>
</body></html>
Обратите внимание, что установка атрибута типа объекта стиля на «text/css» позволяет браузерам, которые не поддерживают этот тип, игнорировать таблицу стилей.
Третий тип: Встроенное определение (Встроенные стили).
Встроенное определение заключается в использовании атрибута стиля объекта в разметке объекта для определения атрибутов таблицы стилей, которые к нему применяются. Примеры следующие:
Скопируйте код кода следующим образом:
<p style="margin-left: 0.5in;margin-right:0.5in">В этой строке добавлены левый и правый внешние патчи</p><p> </p>