当前位置: 首页 > 面试题库 >

通过JavaScript访问CSS文件内容

齐琦
2023-03-14
问题内容

是否可以获取文档中CSS文件的全部文本内容?F.ex:

<link rel="stylesheet" id="css" href="/path/to/file.css">
<script>
    var cssFile = document.getElementById('css');
    // get text contents of cssFile
</script>

我不是真的通过document.styleSheets获取所有CSS规则,还有另一种方法吗?

更新:
当然有ajax选项,我感谢给出的答案。但是似乎没有必要使用已经在浏览器中加载的ajax重新加载文件。因此,如果有人知道提取当前CSS文件的文本内容的另一种方法(不是CSS规则),请发表!


问题答案:

get如果样式表包含在同一个域中,则可以通过一个简单的ajax 调用加载内容

*更新后进行 *编辑
我尝试使用此代码(在FX10上)作为 概念验证
,仅使用对CSS的一个请求,但对我来说似乎有点不客气,应该对其进行测试和验证。如果javascript不可用,还应该进行一些后备改进。

CSS(外部文件 test.css

div { border: 3px solid red;}

HTML / jQuery

<!doctype html >
<html>
    <head>
       <!-- provide a fallback if js not available -->
       <noscript>
          <link rel="stylesheet" href="test.css" />
       </noscript>
    </head>
    <body>

        <div></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
        <script>
        $(document).ready(function() {

            $.when($.get("test.css"))
            .done(function(response) {
                $('<style />').text(response).appendTo($('head'));
                $('div').html(response);
            });
        })
        </script>
    </body>
</html>

您应该在div内看到带有红色边框的CSS代码:)
享受。



 类似资料:
  • 问题内容: 如何使用JavaScript(纯文本或jQuery)获取和设置CSS自定义属性(在样式表中使用过的属性)? 这是我失败的尝试:单击按钮会更改常规属性,但不会更改自定义属性: 问题答案: 您可以使用:

  • 我看了一些其他帖子,试图复制他们所做的,但他们似乎都没有遇到与我相同的问题。基本上,我试图存储S3存储桶中的密钥列表,以便在我的Vue应用程序中迭代它们。我有下面的代码,你可以看到我有3个控制台。记录我试图打印文件值的语句。第一个完全按照我的预期打印,而第二个打印,而第三个根本不打印。因此,出于某种原因,它没有将文件的值持久化到s3之外。listObjectsV2()函数,这意味着我无法访问应用程

  • 问题内容: 我使用CSS 和属性生成标题和图的编号: 这个(假定合适的浏览器)在任何图像之后都带有漂亮的标签“图1.1”,“图1.2”,依此类推。 问题: 如何从Javascript访问此内容?现在的问题是双重在于我想访问 任一 特定计数器的当前值(在某一DOM节点) 或 所述CSS生成的内容的值(在某一DOM节点) 或 ,很明显,这两个信息。 背景: 我想在链接后面附加指向数字的适当数字,如下所

  • 问题内容: 有没有办法从javascript访问CSS变量?这是我的css变量声明。 问题答案: 只是标准方式: 获取计算的样式 使用以获得所需的属性的值 getComputedStyle(element).getPropertyValue(‘–color-font-general’); 例:

  • 我的web目录中有一个本地json文件,希望访问它。我目前使用的是jquery中的$.getjson(),它在所有浏览器中都能正常工作,但Chrome除外。 我如何通过Chrome访问这个文件? 代码: 编辑:totaly忘记在此处粘贴chrome控制台错误: CORS策略阻止了从源“null”访问“file:///c:/users/sirzento/desktop/website/jsondat

  • 问题内容: 无法将图片上传到。现在,如果选择的文件是,我希望能够将文件转换为并将转换后的文件上传到。我能够在转换到与仅如果我给了文件的路径。如何从中访问上载的文件?下面是我的代码: 我正在尝试像这样访问上载的文件: 因为在函数中传递了一个参数。 我的表格: 我在过程的哪一部分转换文件? 请帮忙。非常感谢。 问题答案: 您正在尝试在本地处理文件。该文件必须是您服务器的文件系统,或者至少要在上公开可用