js 样式表入门基础及简单操作

最新推荐文章于 2021-10-13 19:06:37 发布

352328759

最新推荐文章于 2021-10-13 19:06:37 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript 知识盲区介绍

本文链接：https://blog.csdn.net/u013970232/article/details/110638501

版权

样式表核心成员及关系表

数据	数据类型	注释
document.styleSheets	StyleSheetList	相当于 style 标签的集合
document.styleSheets[0]	CSSStyleSheet	CSSStyleSheet 继承自 StyleSheet 相当于某个 style 标签; 也就是传说中的[样式表]
document.styleSheets[0].cssRules	CSSRuleList	相当于某个 style 标签的规则的集合
document.styleSheets[0].cssRules0	CSSImportRule	这里只能取到 [@import url()] 的文本内容, 并不能取到规则内容
document.styleSheets[0].cssRules[0].styleSheet	CSSStyleSheet	@import 的情况, 下一层 styleSheet 又是 CSSStyleSheet 类型; @import 只对应一个样式表, 所以 styleSheet 没有 s, 也不用指定下标
document.styleSheets[0].cssRules1	CSSStyleRule	CSSStyleRule 继承自 CSSRule 相当于某个 style 标签的某条规则; 一个 @import 或者一对{}对应的内容
document.styleSheets[0].cssRules[1].cssText	String	第0个样式表的第1条规则的文本;cssText 是只读, 没有修改功能
document.styleSheets[0].cssRules[0].style	CSSStyleDeclaration	数字下标的是"非初始值"的完整属性名(outline 会被拆分成 color, style, width)
document.styleSheets[0].cssRules[0].style.属性名	String	用属性名可以直接取到属性值;在style可以修改样式

CSSStyleSheet 对象

方法/属性	说明	语法
cssRules	返回一个实时的 CSSRuleList，其中包含组成样式表的 CSSRule 对象的一个最新列表
ownerRule	如果一个样式表示通过@import 规则引入文档，那么 ownerRule 属性会返回相应的CSSImportRule对象，否则返回 null	这个方法还是草案, 不知道怎么用
insertRule(rule [, index])	向样式表的特定位置插入一条新规则，需要提供新规则的完整文本	rule: 规则; index: 位置(默认最前);
deleteRule(index)	从样式表中删除特定位置的一条规则	index: 位置;
rules	跟 cssRules 功能用法相同; 过时方法
addRule(selector, styleBlock, index)	跟 insertRule() 功能相似, 用法不同; 过时方法	selector: 选择器; styleBlock: 规则正文; index: 位置(默认最后);
removeRule(index)	跟 deleteRule() 功能用法相同; 过时方法	index: 位置;

注意：尽管 insertRule 等几个方法是 CSSStyleSheet 的一个方法，但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList

StyleSheet 对象

方法/属性	说明
disabled	返回Boolean表示当前样式表是否可用
href	返回 DOMString 表示样式表的位置
media	返回 MediaList 表示样式的预期目标媒体
ownerNode	返回 Node 将此样式表与当前文档相关联
parentStyleSheet	返回 StyleSheet 如果有的话; 返回 null 如果没有
title	返回 DOMString 表示当前样式表的顾问标题
type	返回 DOMString 表示当前样式表的语言

demo 中的表格同以上表格
demo 主要目的是示范用 javascript 控制样式表

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>js 样式表入门基础及简单操作</title>
	<link rel="stylesheet" href="./css/outsideStyle.css">
	<style>
		@import url("./css/outsideStyle.css");

		* {
    
			outline: 1px red solid;
		}

		#box1 {
    
			font-size: 30px;
		}

		p {
    
			font-size: 20px;
			height: 100px;
			width: 300px;
		}

		#box2 ::after {
    
			display: block;
			outline: 1px green solid;
			height: 50px;
			content: "attr()";
			font-size: 12px;
		}
	</style>
	<style>
		#box3 {
    
			color: red;
		}
	</style>
</head>

<body>

	<h1>样式表核心成员及关系表</h1>
	<table

最低0.47元/天解锁文章

352328759

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 样式表入门基础及简单操作

样式表核心成员及关系表数据数据类型注释document.styleSheetsStyleSheetList相当于 style 标签的集合document.styleSheets[0]CSSStyleSheetCSSStyleSheet 继承自 StyleSheet 相当于某个 style 标签; 也就是传说中的[样式表]document.styleSheets[0].cssRulesCSSRuleList相当于某个 style 标签的规则的集合docu
复制链接

扫一扫