Чтобы облегчить запросы в будущем, я прочитал некоторую информацию и суммировал следующие методы. Это ограничено только родным JS. Если есть неверное место, пожалуйста, укажите это! Я просто надеюсь, что все будут в порядке после прочтения!
1. Вы можете прочитать и написать стиль CSS -стиля элементов документа через объект стиля объекта узла DOM (то есть объект CSSStyleDeclaration).
Например: var elm = document.getElementById ('test');
elm.style.color = 'черный';
2. непосредственно читать и записать атрибуты стиля через getattribute (), setattribute () и removeattribute () объекта элемента
Например: elm.setattribute ('style', 'color: red; линейная-высота: 30px');
3. Через свойство CSSTEXT объекта CSSStyleDeclaration, SetProperty (), удаление пропертиза и других методов
нравиться:
elm.style.csstext = 'color: красный; линейная-высота: 30px'; elm.style.removeproperty ('color'); elm.style.setproperty ('color', 'green', 'vative'); elm.style.csstext = ''; // быстро очистить все заявления об этом правилеОбъявление стиля часть каждого правила CSS (часть внутри скобков) представляет собой объект CSSStyleDeclaration, его свойства и методы:
свойство:
1.csstext: все стиль декларации текста текущего правила. Это свойство может быть прочитано и написано и может использоваться для установки текущего правила.
2. Length: сколько деклараций содержит текущее правило?
3. Pparentrule: правило, содержащее текущее правило, свойство Parentrule того же интерфейса CSSrule.
Метод:
1. Метод GetPropertyPriority () возвращает указанный приоритет. Если есть, это «важно», в противном случае это пустая строка;
2. Метод GetPropertyValue возвращает указанное объявленное значение;
3. Метод Item (Index) возвращает имя атрибута указанной позиции и, как правило, более прямой, используя синтаксис [Index];
4. Метод RemoveProperty используется для удаления свойства CSS и возврата удаленного значения;
5. Метод SetProperty используется для установки указанного атрибута CSS, и нет возвращаемого значения;
4. Используйте атрибут Document.stylessess , чтобы вернуть все объекты стиля (то есть все листы стиля) на текущей странице. Это объект массива классов только для чтения, а его элемент-объект CSSstylesheet (унаследованный от объекта StyleSheet). Методы свойства этого объекта следующие:
свойство:
1. CSSRULES Class Marue Object, элементы являются правилами CSS CSStylerule объектов в листе стиля; IE9 - это следующие правила;
2. Атрибут отключений используется для открытия или закрытия листа стилей со значением True или отключенных;
3. Для тех таблиц стилей, на которые ссылаются другие таблицы стилей, это свойство является нулевым;
4. Поскольку команда @Import от CSS позволяет загружать другие листы стилей в лист стиля, свойство ParentStylesheep имеет свойство ParentStylesheest, которое возвращает лист стилей, который включает в себя текущий лист стилей. Если текущая таблица стилей является таблицей стилей на верхнем уровне, свойство возвращает NULL;
5. Атрибут типа возвращает значение типа объекта стиля, обычно текст/CSS;
6. Атрибут заголовка возвращает значение заголовка объекта StyleSheet;
7. Атрибут HREF-это атрибут только для чтения, который возвращает адрес стили-листа подключения объекта StyleSheep. Для узлов встроенного стиля это свойство равно нулевым;
8. Атрибут СМИ указывает, используется ли этот лист стиля для экрана, печати или оба применимы (все). Этот атрибут только для чтения, а значение по умолчанию-экран;
Метод: deleterule () Удаляет правило из листа стиля, insertrule () вставляет новое правило в лист стиля, а IE9 AddRule () и Removerule ();
нравиться:
Document.stylesheepts [0] .insertrule ('#test: Hover {color: White;}', 0); Document.Stylessheets [0] .deleterule (0); // Удалить первое правило в листе стилей. // возвращать селекторный строковый документ.stylesheets [0] .cssrules [1] .csstext; // возвращать строку правила, включая селекторный документ.stylesheets [0] .cssrules [1] .csstext; // вернуть все строки декларации стиля для текущего правила5. Используйте метод getComputedStyle у окна объекта. Первым параметром является объект элемента, а второй параметр может быть нулевой, пустой строкой или псевдоэлементной строкой. Этот метод возвращает объект CSStyleDeclaration, представляющий объект, представляющий стиль расчета. Он представляет собой информацию о конечном стиле, фактически применяемая к указанному элементу, то есть результат после суперпозиции различных правил CSS;
Например: var color = window.getComputedStyle (ELM, ': до'). Color;
var color = window.getComputedStyle (Elm, ': до'). getPropertyValue ('color');
Или: var color = window.getComputedStyle (ELM, NULL) .color;
Разница между объектом cssstyledeclaration, представляющим вычисленный стиль, и объектом CSSStyleDeclaration, представляющим встроенный стиль:
1. Свойства стиля расчета только для чтения;
2. Рассчитайте значение стиля является абсолютным значением. Относительные подразделения, такие как проценты и точки, будут преобразованы в строковые абсолютные значения, суффиксеры «px». Атрибут, значение которого - цвет, будет возвращен в формате «RGB (#,#,#)» или «rgba (#,#,#,#)»;
3. Не рассчитывайте составные атрибуты, а на основе только самых основных атрибутов, таких как не запрашивая маржу, но только запрос маргинопов и т. Д.;
4. Свойство CSSTEXT не определено в объекте стиля;
5. Стиль расчета также обманчив. При использовании его необходимо обратить внимание на возвратное значение при запросе определенных атрибутов. Например, запрос семьи Font;
6. Метод GetComputeDStyle не поддерживается ниже IE9. Элемент объекта IE имеет атрибут CurrentStyle;
6. Добавить лист стиля напрямую
1. Создайте тег <style>, чтобы добавить встроенный лист стиля
var style1 = document.createElement ('style'); style1.innerhtml = 'body {color: red} #top: Hover {foanle-color: red; color: white;}'; document.head.appendchild (Style1);2. Другой способ - добавить внешнюю таблицу стилей, то есть добавить узел ссылки в документ и указать атрибут Href на URL -адрес внешней таблицы стилей
var link1 = document.createElement ('link'); link1.setattribute ('rel', 'styleSheet'); link1.setattribute ('type', 'text/css'); link1.setattribute ('href', 'reset-min.css'); document.head.appendchild ('link1);7. Метод Window.matchmedia используется для проверки оператора CSS MediaQuery. Последние версии различных браузеров (включая IE 10+) поддерживают этот метод. Для старых браузеров, которые не поддерживают этот метод, вы можете использовать стороннюю библиотеку функций MatchMedia.js;
Вот пример заявления СМИ:
@Media All и (max-device-width: 700px) {body {fourene: #ff0;}}Метод Window.MatchMedia принимает строку оператора MediaQuery в качестве параметра и возвращает объект MediaQueryList. Этот объект имеет следующие два свойства:
Media: возвращает строку заявления MediaQuery Query.
Матчи: возвращает логическое значение, указывающее, соответствует ли текущая среда оператор запроса.
var result = window.matchmedia ('(max-width: 700px)'); if (result.matches) {console.log ('ширина страницы меньше или равна 700px'); } else {console.log ('ширина страницы больше 700px'); }Объект MediaQueryList, возвращаемый методом window.matchmedia, имеет два метода для прослушивания событий: метод addlistener и метод RemoveListener. Если изменяется результат запроса в СМИ, вызывается указанная функция обратного вызова;
var mql = window.matchmedia ("(max-width: 700px)"); mql.addlistener (mqcallback); // указать функцию обратного вызова mqcallback (mqcallback); // undo function function function mqcallback (mql) {if (mql.matches) {// Ширина меньше или равна 700 пикселяСсылки на эту статью:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng Javascript Ссылка на: http://javascript.ruanyifeng.com/dom/css.html
Авторитетное руководство JavaScript Шестой издание
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.