Это работает
<body onload="document.body.classList.add('loaded'); document.body.removeAttribute('onload')">
, и это не проблема для данного конкретного случая, но мне нужна такая же функциональность для нескольких элементов, и я надеюсь, что есть решение, не присваивая всем им атрибут id.
Я пробовал
<body onload="this.classList.add('loaded'); this.removeAttribute('onload')">
и
<body onload="self.classList.add('loaded'); self.removeAttribute('onload')">
, но (очевидно для некоторых) это не работает.
Как мне получить элемент, в котором JavaScript вызывается из таких атрибутов, как onload, onclick, et c.?
Разработка моего варианта использования: все мои стили, кроме critical.css, загружаются с неблокирующий хак вроде
<link rel="stylesheet" media="none" onload="if(media!='all')media='all'" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700%7CPT+Sans+Narrow%7CSource+Sans+Pro:200,300,400,600,700,900&subset=all&display=swap" type="text/css">
Мне не нравится, что часть onload="if(media!='all')media='all'" все еще видна в DevTools после того, как все правильно загружено. Я тоже не совсем понимаю, как это сделать лучше. Было бы интересно узнать ответ на мой точный вопрос, но я также был бы очень признателен за ответ, который предлагает лучший подход. Мой стек: HTML5, CSS, ванильный JavaScript, PHP 7.2. Фреймворков на данный момент нет (не считая Bootstrap).