好玩的.css样式表&变量+换肤

最新推荐文章于 2024-06-24 17:03:01 发布

[暂停使用]日行一善

最新推荐文章于 2024-06-24 17:03:01 发布

阅读量265

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39571197/article/details/89225200

版权

前端专栏收录该内容

100 篇文章 0 订阅

订阅专栏

集合：可通过索引获取对应的元素

rule：规则，样式表由规则组成，规则由属性组成

## document.styleSheets，所有样式表（<style>、<link>）的集合

## document.styleSheets[0].cssRules，当前样式表下，所有rule的集合，有个索引的概念
const styleSheet = document.createElement('style');
styleSheet.innerHTML = `
.rule0 {

}

.rule1 {
  /* 通过 cssRules[1] 获取 */
}

.hello-bar {
  /* 我是rule2 */
}

.rrrred {
color:red!important;
}
`;
document.body.appendChild(styleSheet); 
// 这里没有插入head...是为了保证是最后一个样式表（有时候人们会把<style>写在任何地方）

// 接下来测试用
const styleManage = document.styleSheets[document.styleSheets.length - 1];
## 控制样式表rule（我发现操作之后不会反应到<style>内）

- 插入 insertRule()
styleManage.insertRule('.newRule {color:red!important;}',0); // 让它成为第0条
console.log(styleManage.cssRules);

// .newRule已经生效了
- 删除 deleteRule(index)
// 删除.rrrred，因为之前插入了一条规则，现在它的index变为 4 了
styleManage.deleteRule(4);
console.log(styleManage.cssRules);

// .rrrred已经失效了，即使是删除，<style>内的.rrrred依然存在
- addRule()、removeRule()是IE的方法，推荐使用上面的2个标准方法

- rules、cssRules，rules应该是IE的，因为 styleManage.cssRules === styleManage.rules; // true，不排除IE下有特殊表现

## style控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dynamic-skins</title>
    <style>
        :root {
            /*测试:root*/
            --primary: #383680;
        }

        body {
            /*--primary: yellow;*/
        }

        button {
            outline-color: transparent;
            border: none;
            border-radius: 4px;
            font-size: 10px;
        }

        button[primary] {
            background-color: var(--primary);
            color: #fff;
            padding: 6px 12px;
        }

        button[primary]:focus {
            outline-color: #333;
        }

        .cube {
            --primary: red;
            color: var(--primary);
        }
    </style>
</head>
<body>
<button primary>编辑</button>
<input type="color" onchange="setSkin(event)">
<div class="cube">
    CUBE
</div>
<script>
	function setSkin(evt) {
		const color = evt.target.value;

		// 注意:root对应的是document.documentElement
		// body里的变量，要用document.body，因为会override
		const styleManage = document.documentElement.style;

		if (!styleManage.getPropertyValue('--primary')) {
			console.log('获取不到在:root设置的变量，只有setProperty()之后才能获取');
		}
		styleManage.setProperty('--primary', color);
		console.log(styleManage.getPropertyValue('--primary'));
	}

</script>
</body>
</html>

- :root是document.documentElement（即<html>）

- 存在作用域，会出现override问题

- 跨作用域访问，还没找到。。

- 其他方法

## 资源

- 样式表：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/styleSheets

- rule：https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet

- rule属性：http://www.runoob.com/jsref/obj-cssstyledeclaration.html

[暂停使用]日行一善

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
好玩的.css样式表&变量+换肤

集合：可通过索引获取对应的元素rule：规则，样式表由规则组成，规则由属性组成## document.styleSheets，所有样式表（<style>、<link>）的集合##document.styleSheets[0].cssRules，当前样式表下，所有rule的集合，有个索引的概念const styleSheet = document.cre...
复制链接

扫一扫

专栏目录