<bdo id='YUo9K'></bdo><ul id='YUo9K'></ul>
  1. <legend id='YUo9K'><style id='YUo9K'><dir id='YUo9K'><q id='YUo9K'></q></dir></style></legend>

  2. <small id='YUo9K'></small><noframes id='YUo9K'>

  3. <tfoot id='YUo9K'></tfoot>
      <i id='YUo9K'><tr id='YUo9K'><dt id='YUo9K'><q id='YUo9K'><span id='YUo9K'><b id='YUo9K'><form id='YUo9K'><ins id='YUo9K'></ins><ul id='YUo9K'></ul><sub id='YUo9K'></sub></form><legend id='YUo9K'></legend><bdo id='YUo9K'><pre id='YUo9K'><center id='YUo9K'></center></pre></bdo></b><th id='YUo9K'></th></span></q></dt></tr></i><div id='YUo9K'><tfoot id='YUo9K'></tfoot><dl id='YUo9K'><fieldset id='YUo9K'></fieldset></dl></div>

      JS 控制CSS样式表

      时间:2023-12-15
      • <small id='yCUsg'></small><noframes id='yCUsg'>

          <tbody id='yCUsg'></tbody>
        • <tfoot id='yCUsg'></tfoot>
          <i id='yCUsg'><tr id='yCUsg'><dt id='yCUsg'><q id='yCUsg'><span id='yCUsg'><b id='yCUsg'><form id='yCUsg'><ins id='yCUsg'></ins><ul id='yCUsg'></ul><sub id='yCUsg'></sub></form><legend id='yCUsg'></legend><bdo id='yCUsg'><pre id='yCUsg'><center id='yCUsg'></center></pre></bdo></b><th id='yCUsg'></th></span></q></dt></tr></i><div id='yCUsg'><tfoot id='yCUsg'></tfoot><dl id='yCUsg'><fieldset id='yCUsg'></fieldset></dl></div>

            • <bdo id='yCUsg'></bdo><ul id='yCUsg'></ul>

                <legend id='yCUsg'><style id='yCUsg'><dir id='yCUsg'><q id='yCUsg'></q></dir></style></legend>

                JS 控制 CSS 样式表的方式主要有两种:通过修改样式属性来修改元素样式,以及通过切换 CSS 类名来切换元素样式。下面分别给出具体的步骤和示例说明。

                通过修改样式属性修改元素样式

                1. 获取需要修改样式的元素
                  可以通过 document.getElementByIddocument.getElementsByClassNamedocument.getElementsByTagName 等 API 来获取。
                var ele = document.getElementById("myDiv");
                
                1. 修改元素的样式属性
                  通过修改元素的 style 属性来修改样式,例如修改背景颜色为红色:
                ele.style.backgroundColor = "red";
                

                示例1:将背景颜色切换为红色和白色

                <div id="myDiv"></div>
                <button onclick="changeColor()">切换颜色</button>
                
                <script>
                function changeColor() {
                  var ele = document.getElementById("myDiv");
                  if (ele.style.backgroundColor === "red") {
                    ele.style.backgroundColor = "white";
                  } else {
                    ele.style.backgroundColor = "red";
                  }
                }
                </script>
                

                示例2:通过输入框修改字体大小

                <div id="myDiv">Hello world</div>
                <input type="number" id="fontSize" placeholder="请输入字体大小">
                <button onclick="changeFontSize()">修改字体大小</button>
                
                <script>
                function changeFontSize() {
                  var ele = document.getElementById("myDiv");
                  var fontSizeInput = document.getElementById("fontSize");
                  var fontSize = fontSizeInput.value + "px";
                  ele.style.fontSize = fontSize;
                }
                </script>
                

                通过切换 CSS 类名切换元素样式

                1. 获取需要修改样式的元素
                  同样可以通过 document.getElementByIddocument.getElementsByClassNamedocument.getElementsByTagName 等 API 来获取。

                2. 定义 CSS 类名及样式
                  定义一个 CSS 类名,并在样式表中为该类名定义一组样式,例如:

                .my-class {
                  background-color: red;
                }
                
                1. 切换元素的 CSS 类名
                  通过修改元素的 className 属性来切换类名,例如:
                ele.className = "my-class";
                

                示例1:点击按钮切换元素背景颜色

                <style>
                .red-bg {
                  background-color: red;
                }
                .white-bg {
                  background-color: white;
                }
                </style>
                
                <div id="myDiv"></div>
                <button onclick="toggleBgColor()">切换背景颜色</button>
                
                <script>
                function toggleBgColor() {
                  var ele = document.getElementById("myDiv");
                  if (ele.className === "red-bg") {
                    ele.className = "white-bg";
                  } else {
                    ele.className = "red-bg";
                  }
                }
                </script>
                

                示例2:点击按钮切换元素的样式

                <style>
                .my-style {
                  font-size: 24px;
                  color: red;
                }
                </style>
                
                <div id="myDiv"></div>
                <button onclick="toggleStyle()">切换样式</button>
                
                <script>
                function toggleStyle() {
                  var ele = document.getElementById("myDiv");
                  if (ele.className === "my-style") {
                    ele.className = "";
                  } else {
                    ele.className = "my-style";
                  }
                }
                </script>
                
                上一篇:Html5实现首页动态视频背景的示例代码 下一篇:兼做美工之导航条制作过程分享

                相关文章

                <i id='Ig8gF'><tr id='Ig8gF'><dt id='Ig8gF'><q id='Ig8gF'><span id='Ig8gF'><b id='Ig8gF'><form id='Ig8gF'><ins id='Ig8gF'></ins><ul id='Ig8gF'></ul><sub id='Ig8gF'></sub></form><legend id='Ig8gF'></legend><bdo id='Ig8gF'><pre id='Ig8gF'><center id='Ig8gF'></center></pre></bdo></b><th id='Ig8gF'></th></span></q></dt></tr></i><div id='Ig8gF'><tfoot id='Ig8gF'></tfoot><dl id='Ig8gF'><fieldset id='Ig8gF'></fieldset></dl></div>

                1. <legend id='Ig8gF'><style id='Ig8gF'><dir id='Ig8gF'><q id='Ig8gF'></q></dir></style></legend>

                    <bdo id='Ig8gF'></bdo><ul id='Ig8gF'></ul>

                  1. <small id='Ig8gF'></small><noframes id='Ig8gF'>

                  2. <tfoot id='Ig8gF'></tfoot>