Как правило, есть два способа, которыми JavaScript обращается к свойствам CSS: «доступ через элементы» и «доступ непосредственно на листы стиля». Кроме того, есть проблема, которую нельзя игнорировать при доступе к стилям - стилям выполнения.
1. Доступ через элементы
Поскольку вы хотите получить доступ к листу стиля через элементы, вы должны сначала определить, какой это элемент. Это содержание DOM, поэтому я не буду больше говорить об этом здесь. После получения ссылки вы можете получить доступ к определенному атрибуту через «reference.style. Атрибут к доступу». Например, см. Следующий код.
<pre name = "code"> <pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {hight: 100px; Ширина: 100px; фоновый цвет: красный; } </style> </head> <body> <div id = "a"> </div> </body> </html>Когда мы хотим получить цвет фона #A, мы можем документировать.getElementById ("a"). Style.backgroundcolor; Таким образом, доступ завершен. После этого, вернуть или изменить значение атрибута, это зависит от вас.
2. Прямой доступ к листу стиля
В целом, прямой доступ к листу стиля: «Сначала найдите соответствующий блок стиля, затем найдите соответствующие правила стиля в блоке стиля и, наконец, найдите соответствующий стиль в правиле стиля».
Давайте поговорим о том, какие блоки стиля являются первыми. В коде код CSS будет существовать между тегами <style> </style> или в <NINK>, а <syle> </style> или <Link> - это блок стиля. В коде несколько кодовых блоков могут быть расположены в последовательности сверху вниз, и мы можем получить доступ к блокам стиля, как мы доступны к элементам массива. Например, если мы хотим получить доступ к первому в блоке стиля, мы можем документировать. Стильсы [0]
Тогда скажите, какие правила стиля. Сначала посмотрите на следующий код
<pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {height: 100px; Ширина: 100px; фоновый цвет: красный; } #b {height: 100px; Ширина: 100px; фоновый цвет: синий; } </style> </head> <body> <div id = "a"> </div> <div id = "b"> </div> </body> </html>Код указывает стили #A и #B соответственно. Коллекция стилей #A или коллекции #B - это правило стиля. В этом блоке этого стиля правило первого стиля для #A и правило второго стиля для #B. Мы также можем получить доступ к правилам стиля, как мы можем получить доступ к элементам массива. Например, если мы хотим получить доступ к правилам стиля #B, мы можем документировать. Стильсы [0].
Тогда мы можем получить доступ к соответствующему стилю. Например, если мы хотим изменить цвет фона #b на зеленый, мы можем документировать. Стильсейки [0] .cssrules [1] .style.backgroundcolor = "green";
3. Стиль выполнения
Посмотрите на следующий код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {высота: 100px; Ширина: 100px; Цвет: красный; } #b {height: 100px; Ширина: 100px; } </style> </head> <body> <div id = "a"> <div id = "b"> наблюдать за цветом шрифта </div> </div> </body> </html>Когда мы запускаем оповещение (document.getElementbyId ("b"). Style.color);, мы обнаруживаем, что во всплывающем окне ничего не выводится, но цвет шрифта страницы, очевидно, красный. Почему? Это потому, что атрибуты объекта стиля каждого элемента не обновляются мгновенно. Когда мы хотим вывести красный во всплывающем окне, нам нужно использовать стиль выполнения. window.getComputedStyle (document.getElementById ("b"), нулевой) .color, чтобы вы могли получить доступ к «красному». Есть еще один способ получить доступ к документу в стиле выполнения. GetElementById («B»). CurrentStyle.color, но этот способ поддерживается только т.е.