使用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;
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>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
