js 检索和改变文档的样式

我会带着你远行 2022-08-21 01:04 101阅读 0赞

1.  网页包括：结构层(html标签)，表示层(css)和行为层(js)
2.  style包含着元素的样式信息，查询这个属性返回一个对象而不是一个简单的字符串  
    element.style.property
3.  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中声明的样式信息，即使放在中也不行
4.  设置样式信息 element.style.property=value style属性值必须放在引号里，单引号或双引号都可以 para.style.color=”black”;
5.  使用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;
                }   
        }

改进：

“\`