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");

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

    评论

报告相同问题？

  • document.styleSheets[0].rules 与 cssRules区别
    2020-10-30 17:35
    - **定义**：`document.styleSheets[0].cssRules`也是一个只读属性，它返回`CSSRuleList`对象，其中包含了样式表中的所有CSS规则。 - **兼容性**：这个属性在现代浏览器（包括Firefox、Chrome等）中广泛支持。相比...
  • 网页开发Cascading Style Sheets（CSS）基础教程：样式表工作原理与应用实例
    2025-04-16 09:15
    内容概要：本文详细介绍了层叠样式表（Cascading Style Sheets，简称CSS）的概念、创建背景、工作原理及其应用方式。CSS允许开发者为网页指定样式，如字体、颜色、大小等，同时可以将样式应用于多个页面，确保网站的...
  • matplotlib-stylesheets：Matplotlib的样式表
    2021-02-05 06:18
    `matplotlib-stylesheets` 是一个 Python 库，专为 Matplotlib，这是一个流行的 Python 数据可视化库，提供了丰富的样式表资源。这个库允许开发者轻松地应用预定义的样式到他们的图表，使得数据可视化的外观更加专业...
  • 层叠样式表 (Cascading Style Sheets)介绍PPT
    2023-01-23 17:48
    层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许开发者将样式信息与结构内容分离，使得网页设计更加灵活，易于维护。CSS的...
  • document.styleSheets[0].disabled
    2020-12-09 05:32
    标题中提到的“document.styleSheets[0].disabled”是JavaScript编程中一个与操作网页样式表相关的知识点。在JavaScript中，通过Document对象的styleSheets属性可以获取到当前文档中的样式表集合（StyleSheetList）...
  • 利用document.styleSheets插入css
    2025-01-02 13:44
    大猫会长的博客 方法中，第二个参数指定了新规则插入的位置。具体来说，它是一个索引值，表示新规则将被插入到样式表中的哪个位置。
  • element.style覆盖样式因优先级顺序导致的解决方法
    2020-09-25 06:34
    4. **使用CSS层叠（Cascading）原则**：将通用样式放在外部样式表中，特定样式用内联样式或内部样式表处理。 5. **使用`:not()`伪类**，在某些情况下，它可以提供一种更干净的替代方法，而不是添加`!important`。 ...
  • pyqt-stylesheets:PyQt5样式表作为子模块
    2021-05-19 17:07
    pyqt样式表 安装 python setup.py build python setup.py install 或者 python setup.py sdist pip install dist/pyqtcss-1.0.zip 如何使用 import pyqtcss pyqtcss.available_styles() ['classic', 'dark_blue'...
  • css基础---操作样式表
    2019-06-02 18:29
    wenmin1987的博客 使用style对象可以操作行内样式，但无法访问样式表，而使用styleSheets对象可以访问<style>标签定义的内部样式表，以及<link>标签或@import命令导入的外部样式表，styleSheets对象属于document,通过...
  • rails-stylesheets:使用Rails模板生成的Rails的Legal Lab默认样式表
    2021-03-19 19:34
    首先，请确保您已经创建了...然后用Le Wagon的样式表替换Rails的样式表： rm -rf app/assets/stylesheets curl -L https://github.com/ubi-legal-innovation-team/rails-stylesheets/archive/master.zip > styleshee
  • 关于读取style元素定义样式表的兼容问题实例探讨
    2020-09-25 02:59
    具体来说，document.styleSheets[0]代表文档中第一个样式表对象，该对象的rules属性在IE浏览器中能够正常访问，但在Firefox中则可能不被支持，从而导致代码运行异常，如上文所述的没有弹框出现，并抛出“rules方法在...
  • CSS3样式表- 层叠样式表种类.pptx
    2022-05-06 10:02
    CSS3，全称Cascading Style Sheets（层叠样式表），是用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档样式的样式表语言。它允许我们将样式规则与内容分离，提高了网页设计的灵活性和可维护性。CSS3是CSS...
  • 用JS中document.styleSheets控制cssRules规则
    2009-07-30 10:46
    IE11下面经常卡到爆的博客 学习《javascript高级程序设计》的时候知道了一个小小的知识点……以前用JS控制写在html标签里用style属性的样式,可以用普通的DOM方法获得。例如theEl.style.width，但是如果是写在style标签下的样式h1{width:100px;...
  • stylesheets:客户端服务器样式表管理
    2021-06-12 19:35
    样式表警告：已弃用。 只需使用使命插入样式表需要在服务器和客户端上。组件作者的 API require('stylesheets').requireStylesheet("myfile.css") ：确保样式表在文档中。 必须仅包含文字字符串、concat 运算符或...
  • 如何用JavaScript实现动态修改CSS样式表_.docx
    2021-10-09 22:36
    例如，在以下代码中，`document.styleSheets[0]` 代表了第一个样式表： ```javascript document.styleSheets[0].cssText = document.styleSheets[0].cssText.replace(/red/g, "yellow"); ``` 这段代码找到了样式表...
  • HTML层叠样式表的主要作用是,为什么要使用ＣＳＳ（Cascading Style Sheets）层叠样式表...
    2021-06-11 11:13
    weixin_39679468的博客 先简单介绍一下为什么要使用ＣＳＳ(Cascading Style Sheets)层叠样式表！１．因为CSS样式表可以定义HTML 元素如何显示2.所有主流浏览器都支持CSS样式表3.样式表极大地提高了工作效率4.并且,多重样式表可以层叠为一个...
  • 如何用JavaScript实现动态修改CSS样式表
    2020-10-22 07:28
    `document.styleSheets`对象中的每个`stylesheet`对象都有`cssRules`或`rules`属性，它包含了该样式表中的所有CSS规则。要修改规则，可以定位到具体的`cssRule`对象，然后更改其`cssText`属性。例如： ```...
  • world wide web万维网英文课件：ch03-Cascading Style Sheets.ppt
    2021-09-17 22:29
    【万维网与层叠样式表（CSS）】 在深入探讨CSS之前，我们先要理解World Wide Web（万维网）的基本概念。万维网，通常简称为Web，是由Tim Berners-Lee在1989年发明的一种全球性的信息共享系统，它允许用户通过互联网...
  • 没有解决我的问题, 去提问