javascript为DOM元素设置样式

最新推荐文章于 2024-06-30 10:06:58 发布
最新推荐文章于 2024-06-30 10:06:58 发布
阅读量3.8k 收藏 3
点赞数
分类专栏： javascript 文章标签： htm5 前端 网页设计 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bboyjoe/article/details/46969281
版权 

<!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").οnclick=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").οnclick=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").οnclick=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>)——设置指定属性的值和优先级；

   <style>——获取或设置指定CSS属性的便捷属性；

    <script>
        //使用CSSStyleDeclaration对象的便捷属性
        var placeholder=document.getElementById("placeholder");
        displayStyles();
        document.getElementById("pressme3").οnclick=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").οnclick=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>






bboyjoe
关注
专栏目录
JavaScript--DOM--通过DOM-style属性来设置样式，并由此获取样式
norang的博客
06-07 2114
通过style 属性获取样式有很大的局限性。 style 属性只能返回内嵌样式。换句话说，只有把CSS style 属性插入到标记里，才可以用DOM style 属性去查询那些信息： <p id="example" style="color: grey; font: 12px 'Arial',sans-serif;"> 这可不是使用样式的好办法——表现信息与结构混杂在一起了。更好的 办法是用一个外部样式表去设置样式： p#example { color: grey; font: 12p
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
【使用 DOM】为DOM元素设置样式
weixin_30416871的博客
08-16 299
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表，它会返回一组对象集合，这些对象代表了与文档管理的各个样式表。 每个样式表 都由一个CSSStyleSheet 对象代表，它提供了一组属性和方法来操作文档里的样式。 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息。 <!DOCTYPE h...
DOM文字设置和元素样式设置
最新发布
cai05的博客
06-30 433
DOM文字设置和元素样式设置
js - DOM操作 - 添加样式的三种方法
m0_74417967的博客
06-29 4726
第一种方法有一个问题就是一不小心容易覆盖元素以前就已经绑定了的样式。第一种方法是最笨重的方法，只适合修改小的样式。注意类名前面不要加点。注意类名前面不要加点。
javascript学习-DOM设置元素的样式
qq_43368682的博客
07-21 5009
DOM设置元素的样式 1、通过style属性设置修改样式 【注！】此方式是直接设置标签的style属性，设置完后，优先级最高 <div id="d1"> helloworld </div> <script type="text/javascript"> //1通过style属性设置修改样式 var d1=document.querySelector('#d1') console.log([d1]) d1.style.wid
js DOM操作元素样式
RayShyy的博客
03-19 3258
element.style 行内样式操作 element.className 类名样式操作 1. element.style 上下文是获取到的元素； 通过element.style.某个css样式 设置某个css样式的值； js里采用驼峰命名法，比如设置字体大小，element.style.fontSize = “10px”； 采用element.style是给元素加了行内样式，css权重比较高； 一般是用在修改样式较少的情况下使用。 <body> <div c.
Vue获取DOM元素样式和样式更改示例
08-31
在进行Web开发时，经常需要操作DOM元素的样式，以实现更加动态和响应式的网页布局。Vue.js作为一个流行的前端框架，提供了非常方便的方法来操作DOM元素的样式。本文将详细介绍如何在Vue中获取DOM元素的样式以及如何...
JavaScript程序设计DOM操作元素样式共6页.pd
11-19
JavaScript是一种广泛应用于网页和网络应用开发的...本资料“JavaScript程序设计DOM操作元素样式共6页.pdf.zip”将详细讲解这些概念，帮助你深入理解并应用到实际项目中。记得解压文件阅读，以获取完整的内容和示例。
JavaScript程序设计-DOM操作元素样式.docx
11-02
JavaScript程序设计中的DOM操作是网页动态化不可或缺的部分，特别是对于元素样式的操作，它们能够使网页的视觉效果更加丰富和动态。DOM（Document Object Model）是HTML和XML文档的编程接口，它允许程序和脚本动态...
JavaScript遍历DOM元素的常见方式示例
12-12
本文将详细介绍几种常见的遍历DOM元素的方法，并通过示例进行解析。 1. 使用`firstChild`和`lastChild`： `firstChild`属性返回一个节点的第一个子节点，而`lastChild`则返回最后一个子节点。然而，由于不同浏览器...
javascript学习15：为DOM元素设置样式
八十岁老将的博客
02-13 2286
1、使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表，它会返回一组对象集合，这些对象代表了与文档关联的各个样式表。document.styleSheets返回CSSStyleSheet[] CSSStyleSheet对象的成员， 成员 说明 cssRules 返回样式表的规则集合 deleteRule() 从样式表中移除一条规则 disabled 获取或设置样式表的禁用状态 href 返回链接样式表的href insertRule(
JavaScript_DOM_样式
weixin_38255444的博客
09-01 117
JavaScript_DOM_样式 DOM的样式的控制 得到标签属性:标签对象.style 样式的属性:标签对象.style.border = “1px; solid” ​ 标签对象.className = “div” ​ 事件 ​ 常见事件类型: 属性 当以下情况发生时，出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onb...
（JS基础）DOM：样式
weixin_33882452的博客
03-30 75
在 HTML 中定义样式的方式有 3 种：外联式：通过<link/>元素包含外部样式表文件；嵌入式：通过<style>元素定义嵌入式样式；内联式：通过元素的 style 特性定义的样式。一般来说，内联式优先级最高，其次是嵌入式。当然，这是一个很笼统的描述，更多关于 css 样式优先级请点击链接。访问元素的样式style 属性访问"内联样式"任何支持 style 特性的 HT...
JS中的DOM样式操作
张子又
01-18 2500
DOM样式操作 1.CSS样式操作 我们可以通过 元素节点.style.样式 来设置行内style样式 1.1 获取行内样式 注意: 只能获取行内样式，样式名采用的是驼峰命名法则。 window.onload = function () { var box = document.getElementById("box"); console.log(box.style.backgro...
使用dom添加样式
2201_75359473的博客
06-29 832
querySelector只获取遇到的第一个元素，querySelectorALL获取全部，也是输出数组。DOM：文档对象模型（Document Object Model）,将页面所有的内容表示为可以修改的对象；html元素： <html>= document.documentElement。通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情。它是DOM的入口点，可以从document开始去访问任何节点元素；对DOM的所有操作都是从 document 对象开始的；
javascript(js)操作dom，创建元素、添加样式、组织html
reading-conference-writing
10-08 6543
var mockObj = new function(){ var _id = "mock-container"; return { mock : function(url) { var el = document.getElementById(_id); if(!el) { el = document.cre...
使用js改变DOM样式的三种方式 - 动态创建style标签
ForestCat的专栏
04-02 6561
改变dom节点样式另一种方式是利用js动态创建一个style标签，再填入css属性,再添加到页面  hello world function addStyleNode( str){ var styleNode=document.createElement("style"); styleNode.type="text/css"; if( sty
JavaScript DOM节点添加示例
asmvnjidhuf的专栏
07-17 309
www.usus.cc   这是一个段落。  这是另一个段落。      var para=document.createElement("h1");  var node=document.createTextNode("这是新段落。");  para.appendChild(nowww.e78.comde);  //将node里面的str放到h1段落中  //
JavaScript DOM操作元素样式与CSS规则
“DOM操作元素样式” 在Web开发中，DOM（文档对象模型）是一种标准，用于访问和操作HTML或XML文档的结构。DOM允许我们通过JavaScript等脚本语言动态地改变网页内容，其中包括元素的样式。本文将详细介绍如何使用DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值