使用JavaScript访问和修改CSS样式

1，CSS简介

（1）从内容分离样式

在CSS出现之前，HTML页面的大多数形式是由HTML标签及其属性实现的。比如，为了设置一段文本的字体颜色，会使用类似的代码

<p><font color="red">这段字体颜色是红色</font></p>

这种方式有不少问题:

页面中每段想设置为红色的文本都需要使用这些额外的标签。
建立的样式不能用于其他页面，其他页面还需要使用额外的HTML。
如果想要修改页面的样式，需要编辑每个页面，审查HTML代码，逐个修改所有与样式相关的标签和属性。
由于这些额外的标签，HTML变得难以阅读与维护。

CSS致力于把HTML的样式与其标签功能分离，方法是定义单独的"样式声明"，然后把他们应用于HTML元素或元素的集合。

可以使用CSS设置元素可视属性的样式（比如颜色，字体和大小）以及与格式有关的属性（比如位置，页边距，填充和对齐）。

样式与内容分离会带来一些好处:

样式声明可以应用于多个元素甚至多个页面
修改样式声明就可以影响全部相关的HTML元素，使更新站点样式更加准确，迅速和高效。
共用样式能够提高站点的样式一致性
HTML标签更加清晰，易读和可维护

（2）CSS样式声明

CSS样式声明部分可看: https://blog.csdn.net/qq_39263663/article/details/80258229

2，DOM的style属性

HTML页面在浏览器里以DOM树的形式表现，组成DOM树的分支与末端称为节点。它们都是一个一个对象，都具有自己的属性和方法。

有多种方法可以选择单个的DOM节点或节点集合，比如document.getElementById().

每个DOM节点都有一个style属性，这个属性本身也是个对象，包含了应用于节点的CSS样式信息。下面我们来举例说明。

<div id="id1" style="width:200px;">Welcome back to my site.</div>
<script>
	var myNode = document.getElementById("id1");
	alert(myNode.style.width);
</script>

这段代码会显示"200px"

在上述的例子中，事实上除了myNode.style.width这一语法，也可以使用其对等的形式myNode.style["width"]。有时候，这样做是有必要的，例如，当把属性的名称作为一个变量传递的时候:

var myProperty = "width";

myNode.style[myProperty]="200px";

遗憾的是，虽然这种方式在用于内联样式时很正常，但如果是在页面<head>部分里使用<style>元素，或是使用外部样式表来设置页面元素的样式，DOM的style对象就不能访问它们了。

CSS的很多属性名称包含连字符，比如background-color,sont-size,text-align等。但javascript不允许在属性或方法名称里使用连字符，因此需要调整这些名称的书写方式。方法是删除其中的连字符，并且吧连字符后面的字母大写，于是font-size编程fontSize，其他类似。

一个设置style属性的例子

先编写一个函数，使用DOM的style对象让页面的背景颜色和字体颜色在两个值之间切换。

function toggle(){
	var myElement = document.getElementById("id1");
	if (myElement.style.backgroundColor == 'red'){
		myElement.style.backgroundColor = 'yellow'
		myElement.style.color = 'black';
		}
	else{
		myElement.style.backgroundColor = 'red'
		}

这个函数首先读取页面元素当前的CSS属性background-color，把这个颜色与红色（red）进行比较。

如果属性background-color的当前值是red，就设置元素的style属性，以黄底白字显示文本；否则，就以红底白字显示文本。我们利用这个函数切换HTML文档里一个<span>元素的颜色，完整的代码如下所示。

<!DOCTYPE html>
<html>
<head>
<title>使用javascript修改CSS样式</title>
<style>
span{
	font-size:20pt;
	font-family:arial,helvetica,sans-serif;
	padding:20px;
	background-color: red;
	color: yellow;
	}
</style>
<script>
function toggle(){
	var myElement = document.getElementById("id1");
	if (myElement.style.backgroundColor == 'red' ){
		myElement.style.backgroundColor = 'yellow';
		myElement.style.color = 'black';
		}
	else{
		myElement.style.backgroundColor = 'red';
		}
window.onload = function(){
	document.getElementById("btn1").onclick = toggle;
	}
</script>
</head>
<body>
	<span id="id1">Welcome back to my site.</span>
	<input type = "button" id = "btn1" value="Toggle" />
</body>
</html>

3，使用className访问类

本章前面介绍了样式与页面分离的好处。像前面这个练习使用javascript编辑style对象的属性，能够很好的工作，但却却可能影响样式与内容分离。如果javascript代码经常修改元素的样式声明，就会导致页面的样式不完全由CSS控制了。在这种情况下，如果需要修改javascript应用的样式，就必须编辑涉及的全部javascript函数。

好在我们可以让javascript调整页面样式时并不覆盖相应的样式声明。利用元素的classname属性，我们就可以通过修改class属性的值来调整应用于元素的样式。具体方法如下面的程序所示。

<!DOCTYPE html>
<html>
<head>
	<title>Switching classes with javascript</title>
	<style>
		.classA{
			width:180px;
			border:3px solid black;
			background-color:white;
			color:red;
			font:normal 24px arial,helvetica,sans-serif;
			padding:20px;
			}
		.classB{
			width:180px;
			border:3px dotted white;
			background-color:black;
			color:yellow;
			font:italic bold 24px "Times New Roman", serif;
			padding:20px;
			}
	</style>
	<script>
		function toggleClass(){
			var myElement = document.getElementById("id1");
			if(myElement.className == "classA"){
				myElement.className = "classB";
				}else{
				myElement.className = "classA";
				}
			}
		window.onload = function(){
			document.getElementById("btn1").onclick = toggleClass;
			}
	</script>
</head>
<body>
	<div id="id1" class="classA">An element with a touch of class.</div>
	<input type="button" id="btn1" value="Toggle" />
</body>
</name>

4，DOM的styleSheets对象

document对象的styleSheets属性是一个数组，包含了页面上全部样式表(无论样式表是包含在外部文件中，还是在页面<head>部分里用<style>和</style>标签声明 )。styleSheets数组里的项目以数值索引，第一个出现的样式表索引为0。

启用，禁用和切换样式表

数组里的每个样式表都有一个属性disabled，其值为布尔值true或false。它是可读写的，可以在javascript里方便地启用或禁用某个样式表。

document.styleSheets[0].disabled = true;

document.styleSheets[1].disabled = false;

上面这两行代码"启用"页面里的第2个样式表(索引值为1)，"禁用"第一个样式表(索引值为0)。

一个使用styleSheets的程序清单

<!DOCTYPE html>
<html>
<head>
	<title>Switching Stylesheets with JavaScript</title>
	<style>
		body{
			background-color:white;
			color:red;
			font:normal 24px arial,helvetica,sans-serif;
			padding:20px;
			}
	</style>
	<style>
		body{
			background-color:black;
			color:yellow;
			font:italic bold 24px "Times New Roman",serif;
			padding:20px;
			}
	</style>
	<script>
		var whichSheet = 0;
		document.styleSheets[1].disabled = true;
		function sheet(){
			document.styleSheets[whichSheet].disabled = true;
			whichSheet = ((whichSheet == 1)?0:1);
			document.styleSheets[whichSheet].disabled = false;
			}
		window.onload = function(){
			document.getElementById("btn1").onclick = sheet;
			}
	</script>
</head>
<body>
	Switch my stylesheet with the button below!<br />
	<input type="button" id="btn1" value="Toggle">
</body>
</html>

选择特定样式表:

虽然样式表具有数值索引，但并不便于进行选择。如果给样式表设置标题，并且编写一个函数，根据title属性进行选择，就会容易得多。

如果调用的样式表不存在，我们希望函数以适当的方式进行响应，比如保持正在使用的样式表，并且向用户返回提示消息。

首先，声明几个变量并且初始化:

			var change = false;
			var oldSheet = 0;

布尔类型变量change的值表示是否找到了指定名称的样式表。如果找到了，就把它的hi设置为true，表示要改变样式了。

整形变量oldSheet的初始值为0，用于保存当前启用的样式表数量。如果没有找到与所请求的标题一致的一个新样式表，在从该函数放回之前，会设置为保持启用原来的样式表。

然后用一个循环遍历数组styleSheets:

for(var i = 0; i <document.styleSheets.length;i++){

....

}

对于每个样式表:

如果判断是当前使用的样式表，就把它的索引值保存到变量oldSheet:

if(document.styleSheets[i].disabled == false){

oldSheet = i;

}

在循环的过程中，确保每个样式表都被禁用了:

document.styleSheets[i].disabled = true;

如果当前样式表的标题符合要使用的标题，就把它的disabled值设置为false，从而启用这个样式，并且立即把变量change的值修改为true:

				if(doucment.styleSheets[i].title == mySheet){
					document.styleSheets[i].disabled = false;
					change = true;
					}

在遍历全部样式表之后，可以根据遍历change和oldSheet的状态判断是否处于更换了样式表的状态，如果不是，就把以前使用的样式表再次启用:

if(!change)document.styleSheets[oldSheet].disabled = false;

函数最后返回变量change的值。

完整的代码如下所示

<! DOCTYPE html>
<html>
<head>
	<title>Switching stylesheets with JavaScript</title>
	<style title="sheet1">
		body{
			background-color:white;
			color:red;
			}
	</style>
	<style title="sheet2">
		body{
			background-color:black;
			color:yellow;
			}
	</style>
	<style title="sheet3">
		body{
			background-color:pink;
			color:green;
			}
	</style>
	<script>
		function ssEnable(mySheet){
			var change = false;
			var oldSheet = 0;
			for (var i =0;i<document.styleSheets.length;i++)
			{
				if(document.styleSheets[i].disabled == false){
					oldSheet =i;
				}
				document.styleSheets[i].disabled = true;
				if(document.styleSheets[i].title == mySheet){
					document.styleSheets[i].disabled = false;
					change = true;
				}
			}
			if (!change)document.styleSheets[oldSheet].disabled = false;
			return change;
			}
		function sheet(){
			var sheetName = prompt("Stylesheet Name?");
			if(!ssEnable(sheetName))alert("Not found - original stylesheet retained.");
			}
		window.onload = function(){
			document.getElementById("btn1").onclick = sheet;
			}
	</script>
</head>
<body>
	Switch my stylesheet with the button below!<br />
	<input type="button" id="btn1" value="Change Sheet" />
</body>
</html>