Установка свойства "type" HTML Сброс элемента стиля css правила - PullRequest
Новая
       1

Установка свойства "type" HTML Сброс элемента стиля css правила

1 голос
/ 20 апреля 2020

У меня есть следующий код: 

const head = document.getElementsByTagName('head')[0];
const style = document.createElement('style');
const rules = {
  '.test': 'width: 150px; height: 100px; border: 1px solid red;',
};
let sheet;

head.appendChild(style);

sheet = style.sheet;

for (const rule in rules) {
  sheet.insertRule(`${rule} {${rules[rule]}}`, 0);
}

И он отлично работает. Однако, когда я устанавливаю свойство «type» HTMLStyleElement после того, как его лист был извлечен в переменную, правила листа css становятся пустыми и стили не будут применяться к странице: 

head.appendChild(style);

sheet = style.sheet;
style.type = 'text/css'; // it won't work now!

Почему это происходит ? Разве ссылка на лист не должна быть присвоена переменной?

Ссылка JsBin: https://jsbin.com/gehahiceza/edit?html, js, консоль

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

хорошо, так что вот, для справки, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

type для элемента стиля является атрибутом, а не свойством. материал, который находится внутри любого элемента html, например <img src=""> sr c, является атрибутом, а не свойством элемента img.

, поэтому, когда вы пытаетесь присвоить значение свойству переменной стиля, которая является элементом стиля, js просто создаст свойство (тип) для переменной стиля, а затем назначит значение, которое вы ему дадите.

Извините, я не ответил на ваш вопрос ранее. при дальнейшем исследовании я обнаружил, что .type уже является свойством элемента стиля, и его не следует использовать в соответствии с whatgw.org и «В частности, значением типа с параметрами, такими как» текст / CSS; charset = utf-8 ", заставит этот алгоритм возвращаться раньше." [https://html.spec.whatwg.org/multipage/semantics.html#the -style-element] .

Я действительно наблюдал это поведение из моей скрипки , где я взял ваш код и добавил оператор console.log до sheet.insertRule() вызова и после, чтобы увидеть, что случилось с style.sheet.

, чтобы было ясно, что во время .insertRule () движок возвращает новый элемент стиля в дочерний элемент элемента head. в этом случае он возвращается преждевременно без добавления стилей в for в l oop.

Интересно, если вы сделаете style.type2 = 'css/text' или любой другой текст, который вы хотите. возвращение таблицы стилей (CSSStyleSheet) будет иметь добавленные стили в rules: ruleList[].

я надеюсь, что это, по крайней мере, даст некоторые дополнительные сведения о причине, по которой стили не отображаются при выполнении style.type = 'css/text'

0 голосов
/ 20 апреля 2020

установить свойство типа перед добавлением элемента стиля в документ. 

const head = document.getElementsByTagName('head')[0];
const style = document.createElement('style');
style.setAttribute('type', 'text/css'); //!!!!!!!!!!!
const rules = {
  '.test': 'width: 150px; height: 100px; border: 1px solid red;',
};
let sheet;

head.appendChild(style);

sheet = style.sheet;


for (const rule in rules) {
  sheet.insertRule(`${rule} {${rules[rule]}}`, 0);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="test">
  </div>
</body>



</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...