Dom 中对外联（link标签）css样式的添加和删除

最新推荐文章于 2023-04-18 00:20:46 发布

明明是地主家的傻儿子

最新推荐文章于 2023-04-18 00:20:46 发布

阅读量4.4k

点赞数 3

分类专栏： js 文章标签： javascript dom

本文链接：https://blog.csdn.net/u012532033/article/details/66473440

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 获取HTML中link标签中的css样式

document.styleSheets; //styleSheets返回的是link标签的数组对象，

var sheet = document.styleSheets[num];//num为想获取的link的index值，从0开始

2. 给选择器添加样式

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" style="text/css" href="css/index2.css">
	<title>博客前端-连缀</title>
</head>
<body>
	<div class="parent">class</div>
	<div id="parent">id</div>
	<p class="p">我是p标签</p>
	<p class="p">我是p标签</p>
	<p class="p">我是p标签</p>
	<span>我是span标签</span>
	<script type="text/javascript" src="script/base2.js"></script>
</body>
</html>

css代码：

.parent{
	font: 20px "Microsoft YaHei";
}
#parent{
	background-color: red;
}

js代码：

//num为link标签的index,
//selector：要操作的选择器
//selectorText：要添加的样式，
//position：cssRules数组中添加的位置

function addRule(num, selector, selectorText, position){
    //获取要操作的link标签对象
    var sheet = document.styleSheets[num];
    if (typeof sheet.insertRule != 'undefined'){//w3c
        sheet.insertRule(selector + '{' + selectorText + '}', position);
    }else if (typeof sheet.addRule != 'undefined'){//ie
        sheet.addRule(selector, selectorText, position)
    }
}

//移除css样式的某个规则

function removeRule(num, index){
    var sheet = document.styleSheets[num];
    if (typeof sheet.deleteRule != 'undefined') {
        sheet.deleteRule(index);
    }else if(typeof sheet.removeRule != 'undefined'){
        sheet.removeRule(index);
    }
}

window.onload = function() {
    addRule(0,".parent","background: blue",0);
    removeRule(0,0);
    removeRule(0,0);
}

3. styleSheet中cssRules对象可以参考w3school中的详细介绍

明明是地主家的傻儿子

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Dom 中对外联（link标签）css样式的添加和删除

link中css样式操作（一般不建议用此方法），实际代码中基本上使用改变元素的class来实现css样式的更换
复制链接

扫一扫

专栏目录

Dom 中对外联（link标签）css样式的添加和删除

“相关推荐”对你有帮助么？