zoukankan      html  css  js  c++  java
  • 用js语句控制css样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div id="div1">博客园</div>
    <input type="button" value="变大" onclick="big()">
    <input type="button" value="变色" onclick="color()">


    <script>
    function big() {
    var ele=document.getElementById("div1"); // 先导航到要改的标签
    ele.style.fontSize="80px";              // 用style.里的方法去改变属性参数
    }
    function color() {
    var ele=document.getElementById("div1"); // 同上
    ele.style.color="red";
    }

    </script>
    </body>
    </html>

    ================================== 注: 如果是大公司共同开发代码时,css可能是美工完成的 直接改别人的代码方法不可取 ===================================


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .class1{
    color: #48f444;
    }
    .big{
    font-size: 90px;
    color: #0000cc;
    }
    .small{
    font-size: 30px;
    color: red;
    }

    </style>
    </head>
    <body>
    <div id="div1" class="class1"> 博 客 园 !!</div>
    <input type="button" value="变大" onclick="change('big')"> // 指定传的参数就是要添加的css的样式名
    <input type="button" value="变小" onclick="change('small')">
    <script>
    function change(css) { // 因为功能一样 所以只用一个函数完成,使用参数
    var ele=document.getElementById("div1"); // 通过ID找到标签
    ele.classList.add(css) // 在标签的class list里用此方法添加 css
    }
    </script>
    </body>
    </html>
     
    ================================== 注:此方法是通过添加已有的未引用的样式表到标签中去 ==============================================  
    
    
  • 相关阅读:
    oracle11g静默安装
    pv vg lv
    oracle日志表
    oracle常用sql
    vulnhub~muzzybox
    vulnhub~sunset:dusk1
    vulnhub~MyExpense
    vulnhub~DC-9
    汇编学习一
    贪心算法和动态规划
  • 原文地址:https://www.cnblogs.com/laoguiaabb/p/8026439.html
Copyright © 2011-2022 走看看