Question

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

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

html page

<!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>

样式表

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

控制台命令

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

例如

 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"…}*/

Answer 1

访问样式表数据受the Same Origin Policy的约束。大多数浏览器都认为任何file:///网址都位于不同的来源。

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

Answer 2

问题似乎与此有关：cssRules/rules are null in Chrome

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

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

2 个答案: