javascript为DOM元素设置样式

最新推荐文章于 2024-10-11 16:37:29 发布

原创最新推荐文章于 2024-10-11 16:37:29 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#htm5 #前端 #网页设计 #javascript

javascript 专栏收录该内容

54 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style title="core styles">
        p{
            border:medium double black;
            background-color: lightgray;
        }
        #block1{
            color: white;
        }
        table{
            border-collapse: collapse;
            border:thin solid black;
            margin: 5px;
            float: left;
        }
        td{
            padding: 2px;
        }
        #block4{
            color: white;
            border:thick solid black;
            background-color: gray;
        }
    </style>
    <style media="screen AND (min-width:500px), PRINT" type="text/css">
        #block2{
            color:yellow;
            font-style: italic;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
    <p id="block1">
        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
        帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
    </p>
    <p id="block2">
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。。
    </p>
    <p id="block3" style="color:white;border:thick solid black;background-color: gray">
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。。
    </p>
    <p id="block4">
        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
        帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
    </p>
    <p id="block5" style="color:red;border:medium dashed blue;padding: 2px">
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。。
    </p>
    <div><button id="pressme">点击禁用样式表</button></div>
    <div><button id="pressme1">点击</button></div>
    <div><button id="pressme2">点击</button></div>
    <div><button id="pressme3">点击</button></div>
    <div><button id="pressme4">点击</button></div>
    <div id="placeholder"/>
</body>
</html>

1）使用样式表

document.stylesheets——返回样式表的集合（CSSStyleSheet[])；

1.1)CSSStyleSheet对象的成员：

cssRules——返回样式表的规则集合（CSS）；

deleteRule(<pos>)——从样式表中移除一条规则；

disabled——获取或设置样式表的禁用状态；

href——返回链接样式表的href;

insertRule(<rule>,<pos>)——插入一条新规则到样式表中；

media——返回应用到样式表上的媒介限制集合（MediaList）；

ownerNode——返回样式所定义的元素；

title——返回title属性的值；

type——返回type属性的值；

    <script>
        var placeholder=document.getElementById("placeholder");
        var sheets=document.styleSheets;
        for(var i=0;i<sheets.length;i++){
            var newElem=document.createElement("table");
            newElem.setAttribute("border","1");
            //获得样式表的基本信息
            addRow(newElem,"Index",i);
            addRow(newElem,"href",sheets[i].href);
            addRow(newElem,"title",sheets[i].title);
            addRow(newElem,"type",sheets[i].type);
            addRow(newElem,"ownerNode",sheets[i].ownerNode.tagName);
            placeholder.appendChild(newElem);

        }
        function addRow(elem,header,value){
            elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
        }
    </script>

    <script>
        //禁用样式表
        document.getElementById("pressme").onclick=function(){
            document.styleSheets[0].disabled=!document.styleSheets[0].disabled;
        }
    </script>

1.1.1）MediaList对象的成员：

appendMedium(<medium>)——添加一个新媒介到列表中；

deleteMedium(<medium>)——从列表中移除一个媒介；

item(<pos>)——返回指定索引的媒介；

length——返回媒介的数量；

mediaText——返回媒介的数量

    <script>
        var placeholder=document.getElementById("placeholder");
        var sheets=document.styleSheets;
        //使用MediaList对象
        for(var i=0;i<sheets.length;i++){
            if(sheets[i].media.length>0){
                var newElem=document.createElement("table");
                newElem.setAttribute("border","1");
                addRow(newElem,"Media Count",sheets[i].media.length);
                addRow(newElem,"Media Text",sheets[i].media.mediaText);
                for(var j=0;j<sheets[i].media.length;j++){
                    addRow(newElem,"Media "+j,sheets[i].media.item(j));
                }
            }
            placeholder.appendChild(newElem);

        }
        function addRow(elem,header,value){
            elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
        }
    </script>

1.1.2）CSSRuleList对象的成员：

item(<pos>)——返回指定索引的CSS样式（CSSStyleRule）;

length——返回样式表里的样式数量；

1.1.2.1）CSSStyleRule对象的成员：

cssText——获取或设置样式的文本（包括选择器）；

parentStyleSheet——获取此样式所属的样式表；

selectorText——获取或设置样式的选择器文本；

style——获取一个代表具体样式属性的对象（CSSStyleDeclaration）；

    <script>
        //使用CSSRuleList和CSSStyleRule对象
        var placeholder=document.getElementById("placeholder");
        processStyleSheet();
        document.getElementById("pressme1").onclick=function(){
            document.styleSheets[0].cssRules.item(1).selectorText="#block2";
            if(placeholder.hasChildNodes()){
                var childCount=placeholder.childNodes.length;
                for(var i=0;i<childCount;i++){
                    placeholder.removeChild(placeholder.firstChild);
                }
            }
            processStyleSheet();
        }

        function processStyleSheet(){
            var rulesList=document.styleSheets[0].cssRules;
            for(var i=0;i<rulesList.length;i++){
                var rule=rulesList.item(i);
                var newElem=document.createElement("table");
                newElem.setAttribute("border","1");
                addRow(newElem,"parentStyleSheet",rule.parentStyleSheet.title);
                addRow(newElem,"selectorText",rule.selectorText);
                addRow(newElem,"cssText",rule.cssText);
                placeholder.appendChild(newElem);
            }
        }
        function addRow(elem,header,value){
            elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
        }
    </script>

2）使用元素样式

    <script>
        //从一个HTMLElement上获取CSSStyleDeclaration对象
        var placeholder=document.getElementById("placeholder");
        var targetElem=document.getElementById("block3");
        displayStyle();
        document.getElementById("pressme2").onclick=function(){
            targetElem.style.cssText="color:black";
            displayStyle();
        }
        function displayStyle(){
            if(placeholder.hasChildNodes()){
                placeholder.removeChild(placeholder.firstChild);
            }
            var newElem=document.createElement("table");
            addRow(newElem,"Element CSS",targetElem.style.cssText);
            placeholder.appendChild(newElem);
        }
        function addRow(elem,header,value){
            elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
        }
    </script>

3）使用CSSStyleDeclaration对象

cssText——获取或设置样式的文本；

getPropertyCSSValue(<name>)——获取指定的属性（CSSPrimitiveValue）；

getPropertyPriority(<name>)——获取指定属性的优先级；

getPropertyValue(<name>)——获取字符串形式的指定值；

item(<pos>)——获取指定位置的项目；

length——获取项目的数量；

parentRule——如果存在样式规则就获取它（CSSStyleRule）;

removeProperty(<name>)——移除指定的属性；

setProperty(<name>,<value>,<priority>)——设置指定属性的值和优先级；

    <script>
        //使用CSSStyleDeclaration对象的便捷属性
        var placeholder=document.getElementById("placeholder");
        displayStyles();
        document.getElementById("pressme3").onclick=function(){
            document.styleSheets[0].cssRules.item(1).style.paddingTop="10px";
            document.styleSheets[0].cssRules.item(1).style.paddingRight="12px";
            document.styleSheets[0].cssRules.item(1).style.paddingLeft="5px";
            document.styleSheets[0].cssRules.item(1).style.paddingBottom="5px";
            displayStyles();
        }
        function displayStyles(){
            if(placeholder.hasChildNodes()){
                var childCount=placeholder.childNodes.length;
                for(var i=0;i<childCount;i++){
                    placeholder.removeChild(placeholder.firstChild);
                }
            }
            displayStyleProperties(document.styleSheets[0].cssRules.item(1).style);
            displayStyleProperties(document.getElementById("block5").style);
        }
        function displayStyleProperties(style){
            var newElem=document.createElement("table");
            newElem.setAttribute("border","1");
            addRow(newElem,"border",style.border);
            addRow(newElem,"color",style.color);
            addRow(newElem,"padding",style.padding);
            addRow(newElem,"paddingTop",style.paddingTop);
            placeholder.appendChild(newElem);
        }
        function addRow(elem,header,value){
            elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
        }
    </script>

    <script>
        //使用CSSStyleDeclaration对象的常规属性
        var placeholder=document.getElementById("placeholder");
        displayStyles();
        document.getElementById("pressme4").onclick=function(){
            var styleDecla=document.styleSheets[0].cssRules[0].style;
            styleDecla.setProperty("background-color","lightgray");
            styleDecla.setProperty("padding-top","20px");
            styleDecla.setProperty("color","black");
            displayStyles();
        }
        function displayStyles(){
            if(placeholder.hasChildNodes()){
                var childCount=placeholder.childNodes.length;
                for(var i=0;i<childCount;i++){
                    placeholder.removeChild(placeholder.firstChild);
                }
            }
            var newElem=document.createElement("table");
            newElem.setAttribute("border","1");
            var style=document.styleSheets[0].cssRules[0].style;
            addRow(newElem,"border",style.getPropertyValue("border"));
            addRow(newElem,"color",style.getPropertyValue("color"));
            addRow(newElem,"padding-top",style.getPropertyValue("padding-top"));
            addRow(newElem,"background-color",style.getPropertyValue("background-color"));
            placeholder.appendChild(newElem);
        }
        function addRow(elem,header,value){
            elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
        }
    </script>

        <script>
       //以程序方式探索CSS属性
            var placeholder = document.getElementById("placeholder");
            displayStyles();
            
            function displayStyles() {
                var newElem = document.createElement("table");
                newElem.setAttribute("border", "1");                                    
                
                var style = document.styleSheets[0].cssRules[0].style;                
                for (var i = 0; i < style.length; i++) {
                    addRow(newElem, style[i], style.getPropertyValue(style[i]));
                }

                placeholder.appendChild(newElem);                
            }

            function addRow(elem, header, value) {
                elem.innerHTML += "<tr><td>" + header + ":</td><td>"
                    +  value + "</td></tr>";
            }
        </script>

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style title="core styles">
            p {
                color: white;
                background-color: gray !important;
                padding: 5px !important;
            }
            table {border: thin solid black; border-collapse: collapse;
                    margin: 5px; float: left;}
            td {padding: 2px;}
        </style>
    </head>
    <body>
        <p id="block1">There are lots of different kinds of fruit - there are over
            500 varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with thousands of
            choices.
        </p>
        <div id="placeholder"></div>
        <script>
//获取样式属性的重要性
            var placeholder = document.getElementById("placeholder");
            displayStyles();
            
            function displayStyles() {
                var newElem = document.createElement("table");
                newElem.setAttribute("border", "1");                                    
                
                var style = document.styleSheets[0].cssRules[0].style;
                
                for (var i = 0; i < style.length; i++) {
                    addRow(newElem, style[i], style.getPropertyPriority(style[i]));
                }
                placeholder.appendChild(newElem);                
            }

            function addRow(elem, header, value) {
                elem.innerHTML += "<tr><td>" + header + ":</td><td>"
                    +  value + "</td></tr>";
            }
        </script>
    </body>
</html>

3.1）使用细粒度的CSS DOM对象

CSSPrimitiveValue对象的成员：

cssText——获得一个用文本表示的值；

getFloatValue(<type>)——获得一个数值；

getRGBColorValue()——获得一个颜色值；

getStringValue()——获得一个字符串值；

primitiveType——获得值的单位类型；

setFloatValue(<type>,<value>)——设置一个数值；

setStringValue(<type>,<value>)——设置一个基于字符串的值；

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style title="core styles">
            p {
                color: white;
                background-color: gray !important;
                padding: 7px !important;
            }
            table {border: thin solid black; border-collapse: collapse;
                    margin: 5px; float: left;}
            td {padding: 2px;}
        </style>
    </head>
    <body>
        <p id="block1">There are lots of different kinds of fruit - there are over
            500 varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with thousands of
            choices.
        </p>
        <div id="placeholder"></div>
        <script>
            var placeholder = document.getElementById("placeholder");
            displayStyles();
            
            function displayStyles() {
                var newElem = document.createElement("table");
                newElem.setAttribute("border", "1");                                    
                
                var style = document.styleSheets[0].cssRules[0].style;
    
                for (var i = 0; i < style.length; i++) {
                    var val = style.getPropertyCSSValue(style[i]);
                
                    if (val.primitiveType == CSSPrimitiveValue.CSS_PX) {
                        addRow(newElem, style[i],
                               val.getFloatValue(CSSPrimitiveValue.CSS_PX), "pixels");
                        addRow(newElem, style[i],
                               val.getFloatValue(CSSPrimitiveValue.CSS_PT), "points");
                        addRow(newElem, style[i],
                               val.getFloatValue(CSSPrimitiveValue.CSS_IN), "inches");                    
                    } else if (val.primitiveType == CSSPrimitiveValue.CSS_RGBCOLOR) {
                        var color = val.getRGBColorValue();
                        addRow(newElem, style[i], color.red.cssText + " "
                               + color.green.cssText + " "
                               + color.blue.cssText, "(color)");
                    } else {
                        addRow(newElem, style[i], val.cssText, "(other)");
                    }
                }                
                placeholder.appendChild(newElem);                
            }

            function addRow(elem, header, value, units) {
                elem.innerHTML += "<tr><td>" + header + ":</td><td>"
                    +  value + "</td><td>" + units + "</td></tr>";
            }
        </script>
    </body>
</html>

4）使用计算样式

document.defalutView.getComputedStyle(<htmlElement>)——获取某个元素的计算样式；

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style title="core styles">
            p {
                padding: 7px !important;
            }
            table {border: thin solid black; border-collapse: collapse;
                    margin: 5px; float: left;}
            td {padding: 2px;}
        </style>
    </head>
    <body>
        <p id="block1">There are lots of different kinds of fruit - there are over
            500 varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with thousands of
            choices.
        </p>
        <div id="placeholder"></div>
        <script>
            var placeholder = document.getElementById("placeholder");
            displayStyles();
            
            function displayStyles() {
                var newElem = document.createElement("table");
                newElem.setAttribute("border", "1");                                    
                
                var targetElem = document.getElementById("block1");
                var style = document.defaultView.getComputedStyle(targetElem);                                
                addRow(newElem, "Property Count", style.length);
                addRow(newElem, "margin-top", style.getPropertyValue("margin-top"));
                addRow(newElem, "font-size", style.getPropertyValue("font-size"));
                addRow(newElem, "font-family", style.getPropertyValue("font-family"));
                
                placeholder.appendChild(newElem);                
            }

            function addRow(elem, header, value) {
                elem.innerHTML += "<tr><td>" + header + ":</td><td>"
                    +  value + "</td></tr>";
            }
        </script>
    </body>
</html>