StyleSheetï¼media å±æ§

åºçº¿ å¹¿æ³å¯ç¨

StyleSheet æ¥å£ç media å±æ§æå®æ ·å¼ä¿¡æ¯çé¢æç®æ åªä½ãå®æ¯ä¸ä¸ªåªè¯»çãç±»æ°ç» MediaList å¯¹è±¡ï¼å¯ä»¥ä½¿ç¨ deleteMedium() å é¤ï¼ä¹å¯ä»¥ä½¿ç¨ appendMedium() æ·»å ã

å¼

ä¸ä¸ªåªè¯»çç±»æ°ç» MediaList å¯¹è±¡ã

ç¤ºä¾

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>
    <link rel="stylesheet" href="document.css" media="screen" />
    <style rel="stylesheet" media="screen, print">
      body {
        background-color: snow;
      }
    </style>
  </head>
  <body>
    <script>
      for (let i = 0; i < document.styleSheets.length; i++) {
        console.log(
          `document.styleSheets[${i}].media: ${JSON.stringify(
            document.styleSheets[i].media,
          )}`,
        );
        if (iSheetIndex === 0)
          document.styleSheets[i].media.appendMedium("handheld");
        if (iSheetIndex === 1)
          document.styleSheets[i].media.deleteMedium("print");
        console.log(
          `document.styleSheets[${i}].media: ${JSON.stringify(
            document.styleSheets[i].media,
          )}`,
        );
      }
      // è¿å°è¾åºï¼
      // document.styleSheets[0].media: {"0":"screen"}
      // document.styleSheets[0].media: {"0":"screen","1":"handheld"}
      // document.styleSheets[1].media: {"0":"screen","1":"print"}
      // document.styleSheets[1].media: {"0":"screen"}
    </script>
  </body>
</html>