js 检索和改变文档的样式

网页包括：结构层(html标签)，表示层(css)和行为层(js)

style包含着元素的样式信息，查询这个属性返回一个对象而不是一个简单的字符串

element.style.property

javascript 把加号和减号保留给自己的特殊字符，不允许用在函数或变量的名字里

例如css中的font-family在DOM脚本代码里面应该写成fontFamliy

css中的background-color对应DOM属性backgroundColor

css中的font-weight对应DOM属性fontWeight

css中的margin-top-width对应DOM属性marginTopWidth

color属性改为十六进制#999999，则输出为RGB颜色值(153,153,153)

注意：只有把css的style属性插入到HTML代码里，才可以用DOM style查询。即不能检索在外部css中声明的样式信息，即使放在中也不行

设置样式信息 element.style.property=value style属性值必须放在引号里，单引号或双引号都可以 para.style.color=”black”;

使用DOM设置属性一般是，为指定元素后面的元素添加一个样式（根据某种条件设置样式信息），为h1后边的元素设置样式

//h1的后面一个节点设置样式
window.onload=styleHeaderSiblings;
function styleHeaderSiblings(){
if (!document.getElementsByTagName)  return false;
var headers=document.getElementByTagName("h1");
for (var i=0;i<headers.length;i++)
{
var elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em";
}
}
//找到h1下一个节点
function getNextElement(node){
if(node.nodeType==1)
{return node;}
if(node.nextSibling)
{return getNextElement(node.nextSibling);}
return null;
}`
//隔行设置不同的样式
function stripeTable(){
if (!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("table");
for (var i=0;i<tables.length;i++)
{
var odd=false;//奇数行设置为假
vae rows=tables[i].getElementsByTagName("tr");
for (var j=0;j<rows.length;j++){
if (odd==true){    //修改样式，并设置为false
rows[j].style.backgroundColor="#ffc";
odd=false;
}else{    //为假，不设置样式，odd变量修改为true
odd=true;
}
}
}
}

``
鼠标悬停时，该行改变样式

//当鼠标悬停在表格行的上方时，该行的文本为黑体字
function highlightRows(){
if(!document.getElementsByTagName)  return false;
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
this.style.fontWeight="bold";
}
rows[i].onmouseout=function(){
this.style.fontWeight="normal";
}
}
}

6.  表格隔行设置样式 使用className

//利用className 设置属性
function styleHeaderSiblings(){
if (!document.getElementsByTagName)  return false;
var headers=document.getElementByTagName("h1");
for (var i=0;i<headers.length;i++)
{
var elem=getNextElement(headers[i].nextSibling);
elem.className="bold";
}
}

className是将某个元素的属性值替换，而不是追加
7.  给某个元素追加新的class设置值

//给某个元素追加新的class设置值
function addClass(element,value){
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+="";
newClassName+=value;
element.className=newClassName;
}
}

改进：

//给某个元素追加新的class设置值
function addClass(element,value){
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+="";
newClassName+=value;
element.className=newClassName;
}
}

“`