minimalcss/tests/examples/css-in-js.html at master · layoutanalysis/minimalcss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="css-in-js.css" rel=stylesheet>
    <style type="text/css">
      .inline { color: red }
    </style>
  </head>
  <body>
    <p class="external">external</p>
    <p class="inline">inline</p>
    <p class="cssinjs1">cssinjs1</p>
    <p class="cssinjs2">cssinjs2</p>
    <p class="cssinjs3">cssinjs3</p>
    <p class="cssinjs4">cssinjs4</p>
    <p class="cssinjs5">cssinjs5</p>
    <p class="cssinjs6">cssinjs8</p>
    <script type="text/javascript">
      (() => {
        const css = '.cssinjs1 { color: red; }',
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

        style.type = 'text/css';
        if (style.styleSheet){
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }

        head.appendChild(style);
      })();
    </script>
    <script type="text/javascript">
      (() => {
        const css = '.cssinjs2 { color: red; }',
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');
        head.appendChild(style);

        const sheet = style.sheet;
        sheet.insertRule(css, sheet.cssRules.length)
      })();
    </script>
    <script type="text/javascript">
      const blob = new Blob(['.cssinjs3 { color: red; }'], {type: 'text/css'});
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = window.URL.createObjectURL(blob);
      const head = document.head || document.getElementsByTagName('head')[0];
      head.appendChild(link);
    </script>
    <script type="text/javascript">
      document.querySelector('.cssinjs4').style.cssText = "color: red";
      document.querySelector('.cssinjs5').setAttribute("style", "color:red");
      document.querySelector('.cssinjs6').style.color = "red";
    </script>
  </body>
</html>