本地打开HTML报错DOMException: 无法访问CSSStyleSheet.cssRules求助

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at HTMLLabelElement.

该报错仅在本地直接双击打开page.html文件时触发，通过Live Server、WAMP等服务器环境打开则完全正常，查阅相关文档后仍未解决。

相关JS代码 #

let test = [".un", ".deux", ".trois", ".quatre", ".cinq", ".six", ".sept", ".huit"]
console.log(`${test}`)
let test2 = ["allezun", "allezdeux", "alleztrois", "allezquatre", "allezcinq", "allezsix", "allezsept", "allezhuit"]
// let test3 = "opun"
// , "opdeux","optrois","opquatre","opcinq","opsix","opsept","ophuit"
// FOLD UNFOLD CLASS, verifie quand t'appuie sur un bouton. Créer les class fold et unfold suivant si t'a appuyer pour "ouvrir" le bouton ou si t'appuie pour le "fermer"
let stylesheet = document.styleSheets[1]
console.log(document.styleSheets[1])
let animation = document.getElementById("share")
console.log(animation)

animation.addEventListener("click", function () {
    if (animation.classList.contains("unfold")) {
        for (i = 0; i < 8; i++) {

            let un = [...stylesheet.cssRules].find((r) => r.selectorText == `.share.fold ~ ${test[i]}`)
            // console.log(stylesheet.cssRules[un])
            un.style.removeProperty("animation")
            setTimeout(() => {
                un.style.setProperty("opacity", "1")
            }, 650);
        }

        animation.classList.remove("unfold")
        setTimeout(() => {
            animation.classList.add("fold")
        }, 1);

        // console.log(animation.child[0])
        for (i = 0; i < 8; i++) {

            let un = [...stylesheet.cssRules].find((r) => r.selectorText == `.share.fold ~ ${test[i]}`)
            // console.log(stylesheet.cssRules[un])
            un.style.setProperty("animation", `${test2[i]} 0.65s reverse`)
            // setTimeout(() => {
            //     un.style.setProperty("opacity", "0")
            // }, 650);

            // un.style.setProperty("animation", `${test3} 3s`)
        }
        // console.log(animation)
        // console.log(animation.classList.contains)
    }
    else if (animation.classList.contains("fold")) {
        animation.classList.remove("fold")
        setTimeout(() => {
            animation.classList.add("unfold")
        }, 20);

        for (i = 0; i < 8; i++) {

            let un = [...stylesheet.cssRules].find((r) => r.selectorText == `.share.unfold ~ ${test[i]}`)
            // console.log(stylesheet.cssRules[un])
            un.style.setProperty("animation", `${test2[i]} 1.5s`)
        }
    }
    else {
        animation.classList.add("unfold")
        for (i = 0; i < 8; i++) {

            let un = [...stylesheet.cssRules].find((r) => r.selectorText == `.share.fold ~ ${test[i]}`)
            // console.log(stylesheet.cssRules[un])
            un.style.setProperty("animation", `${test2[i]} 1s`)
            setTimeout(() => {
                un.style.setProperty("opacity", "1")
            }, 650);
        }
    }
})

相关HTML代码 #

<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style2.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.1.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer></script>
<script src="./js/bootstrap.js"></script>
<script src="./js/main2.js" defer></script>
<script src="./js/all.min.js"></script>
<title>Accueil</title>

问题原因 #

本地直接打开HTML文件时，浏览器使用file://协议，出于安全策略限制，会禁止访问CSS样式表的规则，避免跨域风险。而服务器环境使用http://或https://协议，同源策略规则不同，因此可以正常访问。

解决方法 #

放弃直接操作样式表规则的写法，改用给元素添加/移除CSS类的方式控制动画，这种写法更安全，也符合前端最佳实践：

1. 在CSS中预先定义不同状态的动画规则：

/* 展开状态动画 */
.share.unfold ~ .un { animation: allezun 1.5s; opacity: 1; }
.share.unfold ~ .deux { animation: allezdeux 1.5s; opacity: 1; }
.share.unfold ~ .trois { animation: alleztrois 1.5s; opacity: 1; }
.share.unfold ~ .quatre { animation: allezquatre 1.5s; opacity: 1; }
.share.unfold ~ .cinq { animation: allezcinq 1.5s; opacity: 1; }
.share.unfold ~ .six { animation: allezsix 1.5s; opacity: 1; }
.share.unfold ~ .sept { animation: allezsept 1.5s; opacity: 1; }
.share.unfold ~ .huit { animation: allezhuit 1.5s; opacity: 1; }

/* 收起状态动画 */
.share.fold ~ .un { animation: allezun 0.65s reverse; opacity: 0; }
.share.fold ~ .deux { animation: allezdeux 0.65s reverse; opacity: 0; }
.share.fold ~ .trois { animation: alleztrois 0.65s reverse; opacity: 0; }
.share.fold ~ .quatre { animation: allezquatre 0.65s reverse; opacity: 0; }
.share.fold ~ .cinq { animation: allezcinq 0.65s reverse; opacity: 0; }
.share.fold ~ .six { animation: allezsix 0.65s reverse; opacity: 0; }
.share.fold ~ .sept { animation: allezsept 0.65s reverse; opacity: 0; }
.share.fold ~ .huit { animation: allezhuit 0.65s reverse; opacity: 0; }

/* 默认初始状态 */
.share ~ .un, .share ~ .deux, .share ~ .trois,
.share ~ .quatre, .share ~ .cinq, .share ~ .six,
.share ~ .sept, .share ~ .huit { opacity: 0; }

2. 修改JS代码，仅控制目标元素的类即可：

let animation = document.getElementById("share");

animation.addEventListener("click", function () {
    if (animation.classList.contains("unfold")) {
        animation.classList.remove("unfold");
        setTimeout(() => animation.classList.add("fold"), 1);
    } else if (animation.classList.contains("fold")) {
        animation.classList.remove("fold");
        setTimeout(() => animation.classList.add("unfold"), 20);
    } else {
        animation.classList.add("unfold");
    }
});

这种方式完全避开了对cssRules的访问，无论本地直接打开还是服务器环境都能正常运行，同时代码逻辑更清晰，维护性更强。

内容的提问来源于stack exchange，提问作者enzo martinez