Кратчайший способ добавить правила CSS с помощью vanilla JS
Я работаю над библиотекой, которую пытаюсь удержать ниже 1 КБ. Что я уже очень близко к своим пределам. Мне нужно добавить правило css, чтобы управлять поведением show hide.
[hidden]{ display:none !important }
HTML-страница не имеет тегов стиля. Это будет единственное правило, которое мне нужно. Я могу добавить его только с помощью чистого JS. Я не делайте хочу изменить стиль элемента с el.style.display = 'none'. Я хочу сделать это с атрибутом.
Итак, как я могу добавить это, я нашел решения, которые создают элемент стиля, устанавливают его innerHTML и добавляют его к элементу заголовка. Я надеюсь, что смогу получить ответ / взломать, возможно, сделать это с меньшим количеством символов.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы хотите скрыть элемент с атрибутом, просто используйте атрибут hidden.
Пример:
<div hidden class = "container"></div>
Если вы не хотите использовать el.style.display = 'none', вы также можете использовать cssText, чтобы использовать весь стиль только в одной строке.
Пример:
document.querySelector('.container').style.cssText = 'width: 100vw; height: 100vh; background: rebeccapurple;';<div class = "container"></div>Другим вариантом будет использование метода CSSStyleSheet.insertRule().
The CSSStyleSheet.insertRule() method inserts a new CSS rule into the current style sheet, with some restrictions.
Пример:
const css = window.document.styleSheets[0];
css.insertRule(`
.container {
width: 100vw;
height: 100vh;
background: rebeccapurple;
}
`, css.cssRules.length);<div class = "container"></div>Хорошие лайфхаки, не знал о них. Не уверен, что это точно отвечает ОП.
Это самое короткое, что у меня есть, пожалуйста, сделайте его короче, если можете.
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML = s;
// Usage:
addCSS("[hidden]{ display:none !important }");
Вы можете удалить пробелы внутри правила CSS: "[hidden]{display:none!important}" и вокруг знаков равенства. (да-да, я знаю ;)
Создайте свою таблицу стилей внутри JS-файла, затем создайте тег
script. InnerText таблицу стилей и добавьте дочерний элемент вhead