技术文摘

js存储css的方法

2025-01-09 15:47:29 小编

JS 存储 CSS 的方法

在网页开发中，有时我们需要通过 JavaScript 来存储和管理 CSS 样式，这不仅能增加代码的灵活性，还方便对页面样式进行动态调整。以下为您介绍几种常见的 JS 存储 CSS 的方法。

内联样式

内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中，通过 JavaScript 可以很方便地操作。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS 存储 CSS - 内联样式</title>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    <script>
        var myDiv = document.getElementById('myDiv');
        myDiv.style.color ='red';
        myDiv.style.fontSize = '20px';
    </script>
</body>
</html>

这种方式简单直接，但不利于样式的统一管理。

样式表规则操作

我们还可以使用 document.styleSheets 属性来访问文档中的样式表，并动态添加或修改规则。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS 存储 CSS - 样式表规则</title>
    <style id="myStyleSheet">
        /* 初始样式 */
      .myClass {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="myClass">这是应用样式的 div</div>
    <script>
        var styleSheet = document.getElementById('myStyleSheet').sheet;
        // 添加新规则
        styleSheet.insertRule('.newClass { background-color: yellow; }', styleSheet.cssRules.length);
        // 修改现有规则
        for (var i = 0; i < styleSheet.cssRules.length; i++) {
            if (styleSheet.cssRules[i].selectorText === '.myClass') {
                styleSheet.cssRules[i].style.color = 'green';
            }
        }
    </script>
</body>
</html>

这种方法能够集中管理样式，便于维护。

本地存储

如果需要在用户设备上持久化存储 CSS 样式设置，可以利用浏览器的本地存储。比如，用户在页面上调整了主题颜色，我们可以将这个设置保存下来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS 存储 CSS - 本地存储</title>
    <style id="themeStyle">
        /* 默认主题 */
        body {
            background-color: white;
            color: black;
        }
    </style>
</head>
<body>
    <button onclick="changeTheme()">切换主题</button>
    <script>
        function changeTheme() {
            var currentTheme = localStorage.getItem('theme');
            if (currentTheme === 'dark') {
                localStorage.setItem('theme', 'light');
                document.getElementById('themeStyle').sheet.insertRule('body { background-color: white; color: black; }', 0);
            } else {
                localStorage.setItem('theme', 'dark');
                document.getElementById('themeStyle').sheet.insertRule('body { background-color: black; color: white; }', 0);
            }
        }
        // 页面加载时应用存储的主题
        var storedTheme = localStorage.getItem('theme');
        if (storedTheme === 'dark') {
            document.getElementById('themeStyle').sheet.insertRule('body { background-color: black; color: white; }', 0);
        }
    </script>
</body>
</html>

通过本地存储，用户下次访问页面时，能看到之前设置的样式。

以上这些 JS 存储 CSS 的方法，各有优缺点，开发者可以根据项目的具体需求进行选择和应用，让页面的样式管理更加高效和灵活。

TAGS: js存储 css存储 js操作css 存储方案

万千站长工具