为什么我尝试使用document.stylesheets无法正常工作？

I'm trying to understand how the jquery pertaining to modifying stylesheets works by understanding how to do it with vanilla javascript, but there isn't a lot of resources on the subject that I can find. I already checked the stack over flow page on the subject but I cant figure out what I'm doing wrong.

我试图通过理解如何使用vanilla javascript来理解与修改样式表有关的jquery是如何工作的，但是我找不到很多关于这个主题的资源。我已经检查了关于主题的流量页面上的堆栈，但我无法弄清楚我做错了什么。

I have a simple html page and a simple style sheet, with the javascript in the html page in a script tag

我有一个简单的html页面和一个简单的样式表，在脚本标记的html页面中有javascript

html page

HTML页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
         <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="parent"></div>
        <script>
            let parent=document.getElementsByClassName('parent')[0];
            for(let i=0; i<10;i++){
                let child=document.createElement('div');
                let id= "i"+ i.toString();
                child.setAttribute("id",id);
                parent.appendChild(child);
            }
        </script>
    </body>
</html>

style sheet

样式表

        body{
            background-color: lightblue;
        }
        .parent{
            display:flex;
            flex-wrap: wrap;
            flex-direction: column;
        }
        .parent div{
            margin: 5px;
            width: 50px;
            height: 50px;
            background-color: white;
        }

console commands

控制台命令

when I style to pull up the stylesheet object, in the console I get the object aka the stylesheet but the cssRules property is set to null, with none of the rules in the style sheet in it. I cant figure out as to why this is.

当我设置样式来拉出样式表对象时，在控制台中我得到了对象又称样式表，但cssRules属性设置为null，其中没有样式表中的任何规则。我无法弄清楚为什么会这样。

for example

例如

 document.styleSheets //returns StyleSheetList {0: CSSStyleSheet, length: 1}

document.styleSheets[0] /*returns CSSStyleSheet {ownerRule: null, cssRules: 
   null, rules: null, type: "text/css", href:
   "file:///C:/Users/brand/Documents/test/main.css"…}*/

2 个解决方案

#1

Access to stylesheet data is subject to the Same Origin Policy. Most browsers consider any file:/// URL to be on a different origin.

对样式表数据的访问受同源策略的约束。大多数浏览器认为任何file：/// URL都位于不同的来源。

You need to be using HTTP or HTTPS to access the document, and have the stylesheet on the same origin.

您需要使用HTTP或HTTPS来访问文档，并将样式表放在同一个源上。

#2

The issue seems to be related to this: cssRules/rules are null in Chrome

这个问题似乎与此有关：Chrome中的cssRules / rules为null

The solution is to look at the site via a web server like Apache / XAMPP.

解决方案是通过Apache / XAMPP等Web服务器查看站点。

#1