技术文摘
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 的方法，各有优缺点，开发者可以根据项目的具体需求进行选择和应用，让页面的样式管理更加高效和灵活。