javascript获取样式表的规则及读取与写入

CSSStyleSheet是继承了StyleSheet的接口属性,它是用于找当前文档中的<link rel=“” href=“”…>这样文件的,有以下属性:lenght,cssRules,title,href,type,deleteRule,insertRule等

CSSStyleRule是继承于CSSRule,它是用于找<link rel=“” href="'>中所有每个规则的集合,它有以下属性:
cssText,selectorText,type,style,等。

第1种方法

 function getStyle(element){//这里是兼容IE的styleSheet属性,sheet是dom中CSSStyleSheet对象的属性return element.sheet||element.styleSheet;}//获取到文档中的第1个linkvar link=document.getElementsByTagName("link")[0];var sheet=getStyle(link);//获取link文件的规则合集对象cssRules,以及兼容IE的rulesvar rules=sheet.cssRules||sheet.rules;//获取.css文件中第一条规则,以花括号为准的第1个{}var rule=rules[0];//这里是写入cssText,而直接rule.cssText是直接读取整个样式表,但不能写入,要写入必须rule.style.cssText="你写入的规则"rule.style.cssText="margin:5px;padding:5px;";//这里是显示你读取第1条规则的选择符文本如:.db 或#main或标签选择符div等console.log(rule.selectorText);console.log(rule.style.cssText);

第2种方法

//获取到文档中的第1个link,这里直接用document.styleSheets[0]来找文档中的<link>文件,找到后直接获取文件中的规则集合var sheet=document.styleSheets[0];//获取link文件的规则合集对象cssRules,以及兼容IE的rulesvar rules=sheet.cssRules||sheet.rules;//获取.css文件中第一条规则,以花括号为准的第1个{}var rule=rules[0];//这里是写入cssText,而直接rule.cssText是直接读取整个样式表,但不能写入,要写入必须rule.style.cssText="你写入的规则"rule.style.cssText="margin:5px;padding:5px;";//这里是显示你读取第1条规则的选择符文本如:.db 或#main或标签选择符div等console.log(rule.selectorText);console.log(rule.style.cssText);

然后是你在文件中的导入的外部规则,也包括你在当前文档中嵌入的规则,嵌入的规则没有 的href,rel,href=undefine属于未定义状态
这是外部导入css文件

body,html
{margin: 0;padding: 0;
}
body{font-family: Arial, Helvetica, sans-serif;font-size: 1em;
}#mydiv
{margin: 0 auto;width: 800px;margin-top: 5px;border: solid 1px blue;
}
#mydiv #mylist
{margin: 0;padding: 0;
}
#mydiv #mylist li
{list-style: none;margin: 5px;font-size: 0.85em;float:left;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/83168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5G定位技术原理与应用场景

5G高精度定位服务不仅适用于应急&#xff0c;还可以支持大量的个人业务&#xff0c;包括室外和室内场景&#xff0c;可以在交通道路、隧道、地下停车场或室内环境中支持高精度定位服务。在这些区域中&#xff0c;由于卫星信号的覆盖范围较小&#xff0c;基于5G网络的高精度定位…

[NLP] LLM---<训练中文LLama2(一)>训练一个中文LLama2的步骤

一 数据集 【Awesome-Chinese-LLM中文数据集】 【awesome-instruction-dataset】【awesome-instruction-datasets】【LLaMA-Efficient-Tuning-数据集】Wiki中文百科&#xff08;25w词条&#xff09;wikipedia-cn-20230720-filteredBaiduBaiKe&#xff08;563w词条&#xff09; …

权限提升Web篇

权限总类 Linux 管理员UID为0:超级用户&#xff0c;即root用户&#xff0c;相当于system和administrator的集合 系统用户UID为1-999: Linux系统为了避免因某个服务程序漏洞而被黑客提权的普通用户&#xff0c;拥有部分权限 UID从1000开始: 是由管理员创建的用于日常工作的用…

java-- 字符串+拼接详解, 性能调优 (底层原理实现)

目录 简单了解一下字符串 String类里面是如何存放字符串的? String的不可变性 字符串拼接的方法 1.使用拼接字符串 2. 使用concat 3. 使用StringBuilder 4.StringBuffer 使用字符串拼接的原理 使用concat StringBuilder 效率比较 简单了解一下字符串 字符串在java…

Killing LeetCode [46] 全排列

Description 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 Intro Ref Link&#xff1a;https://leetcode.cn/problems/permutations/ Difficulty&#xff1a;Medium Tag&#xff1a;Array&#xff0c;Back Trackin…

win10 win11 停止系统自动更新方法

目录 方法一&#xff1a;使用注册表更改 1. 进入注册表 2. 进入如下目录 3. 新建 DWOED(32-位)值 4. 双击 FlightSettingsMaxPauseDays&#xff0c;选择十进制&#xff0c;左侧输入9999 5. 开头的天数已经变为9999天 方法二&#xff1a;停止自动更新的服务 1. 查询服务…

arxiv上传latex文章的坑

1. 下载latex源码&#xff0c;overleaf-->提交-->arXiv-->下载latex源码 2. arxiv只支持上传小于50M的文件&#xff0c;大于50M将会出现失败 3. latex 编译错误及解决之Package natbib Error: Bibliography not compatible with author-year citations. 解决方案&a…

所有人别错过!云计算真的不错,前景钱途并存!

近年来&#xff0c;中国云计算产业发展迅猛&#xff0c;保持30%以上的年均增长率&#xff0c;成为全球增速最快的市场之一&#xff0c;云计算应用领域正向制造、政务、金融、医疗、教育等企业级市场延伸拓展。目前&#xff0c;云计算应用的普及促使开源技术广受关注&#xff0c…

汇编宏伪指令介绍

1、汇编宏伪指令介绍 .macro macname macargs .endm&#xff08;1&#xff09;“.macro"和”.endm"表示宏定义的开始和结束&#xff1b; &#xff08;2&#xff09; “.macro"后面接着宏定义的名字&#xff0c;然后是参数&#xff0c;参数后面的宏定义的实现…

安装chromadb遇到的问题与python3升级

环境&#xff1a; python 3.10 &#xff0c; centos 7.x 使用 pip3 install chromadb 时&#xff0c;遇到以下问题。 问题1: gcc note: This error originates from a subprocess, and is likely not a problem with pip. ERROR: Failed building wheel for chroma-hnswlib F…

MYSQL不常用但好用写法

ORDER BY FIELD() 自定义排序逻辑 MySql 中的排序 ORDER BY 除了可以用 ASC 和 DESC&#xff0c;还可以通过 「ORDER BY FIELD(str,str1,…)」 自定义字符串/数字来实现排序。这里用 order_diy 表举例&#xff0c;结构以及表数据展示&#xff1a; ORDER BY FIELD(str,str1,…) …

Python API教程:API入门(上)

什么是API&#xff1f; 一个API&#xff0c;或被称为应用程序接口&#xff0c;是一个服务器为你提供一个接收或发送数据的代码。API通常用来接收数据。 本文就集中焦点在此话题中。 当我们想从一个API中接收数据&#xff0c;我们需要开始请求。请求可以包含整个Web。例如&#…

山石网科国产化防火墙,打造全方位边界安全解决方案

互联网的快速发展促进了各行各业的信息化建设&#xff0c;但也随之带来了诸多网络安全风险。大部分组织机构采用统一互联网接入方案&#xff0c;互联网出口承担着内部用户访问互联网的统一出口和对外信息服务的入口&#xff0c;因此在该区域部署相匹配的安全防护手段必不可少。…

【红包雨功能的】环境部署(弹性伸缩、负载均衡、Redis读写分离、云服务器部署)

文章目录 创建环境创建专用网络VPC安全组创建云服务器打包部署2. Java环境启动项目开机启动任意服务1. 制作服务文件2. 制作启动脚本3. 制作停止脚本4. 增加执行权限5. 设置开机启动 创建镜像继续创建多台云服务器负载均衡弹性伸缩redis的报警规则白名单1. LAMP 环境1. 安装Apa…

Postman应用——Headers请求头设置

文章目录 Header设置Header删除或禁用Header批量编辑Header预设添加 一般在接口需要校验签名时&#xff0c;Headers请求头用来携带签名和生成签名需要的参数&#xff0c;在Postman也可以设置请求头在接口请求时携带参数。 Header设置 说明&#xff1a; Key&#xff1a;Header…

docker day05

昨日内容回顾: - dockerfile的优化 - 编译速度 - 充分利用缓存镜像&#xff0c;将不常变更的指令放在靠前的位置; - 在不影响功能的前提下&#xff0c;最好是可以合并多条指令&#xff0c;可以减少中间容器或者镜像的产生; - …

用于设计 CNN 的 7 种不同卷积

一 说明 最近对CNN架构的研究包括许多不同的卷积变体&#xff0c;这让我在阅读这些论文时感到困惑。我认为通过一些更流行的卷积变体的精确定义&#xff0c;效果和用例&#xff08;在计算机视觉和深度学习中&#xff09;是值得的。这些变体旨在保存参数计数、增强推理并利用目标…

【Hash表】找出出现一次的数字-力扣 136

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

“新”心相印 | 长沙市网络代表人士培训班“破冰”联谊“湘”味十足

搜狐网湖南&#xff08;文/莫谦&#xff09;9月18日至9月22日&#xff0c;首期长沙市网络代表人士专题培训班在北京大学举行&#xff0c;培训班学员主要是长沙网络名人联盟成员&#xff0c;涵盖抖音达人、微博博主、网络作家、网络大V等。 为了加强长沙网络名人联盟组织建设&a…

6-1 汉诺塔

汉诺&#xff08;Hanoi&#xff09;塔问题是一个经典的递归问题。 设有A、B、C三个塔座&#xff1b;开始时&#xff0c;在塔座A上有若干个圆盘&#xff0c;这些圆盘自下而上&#xff0c;由大到小地叠在一起。要求将塔座A上的圆盘移到塔座B上&#xff0c;并仍按同样顺序叠放。在…