CHAO_YE 2020-12-06 20:29 采纳率: 0%
浏览 20

无法用styleSheets[0].cssRules[0].cssText返回外链式的样式表？

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style1.css" type="text/css">
    <style>
        .mm{
            color:coral;
            font-size:22px;
        }
        #pp{
            border:1px solid springgreen;
        }
    </style>
    
</head>
<body>
    <p style="color:yellowgreen; font-size:12px;">我愿像个天使守护你</p>
    <p class="mm">生则同衾死则同穴</p>
    <p class="ee">化为孤岛的鲸</p>
    <button id="pp">点我呀</button>
    <p id="demo"></p>
    <script>
         document.getElementById("demo").innerHTML=document.styleSheets[0].cssRules[0].cssText;   
  //return  CssStyleDeclaration.html:45 Uncaught DOMException: Failed to read the //'cssRules' property from 'CSSStyleSheet': Cannot access rules  at...
    </script>
</body>



link引入的style1.css:
.ee{
    color:rgb(48, 45, 182);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 16:31
    关注

    参考GPT和自己的思路：

    根据你提供的代码，可能是因为外链式的样式表是以 link 标签的形式引入的，而内嵌式的样式表是以 style 标签的形式写在了 head 中。因此，JavaScript 访问不到外链式的样式表中的样式规则，而访问到的第一个样式规则就是在 style 标签内的规则，即 .mm。可以尝试使用 getComputedStyle() 方法获取元素最后应用的样式，如下：

    const button = document.getElementById("pp");
const buttonStyle = window.getComputedStyle(button);
document.getElementById("demo").innerHTML = buttonStyle.getPropertyValue("border");

    这段代码将获取按钮元素的样式（包括外链式和内嵌式的样式），并返回它的边框样式。

    评论

报告相同问题？

悬赏问题

  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码