JS修改css样式

1.点击按钮改变宽度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #first{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="" name="" class="uName" readonly="true">
<div id="first"></div>
<input type="button" name="" value="点我" > 
</body>
<script type="text/javascript">
    // 获取元素,并修改背景
    var first = document.getElementById("first");
    first.style.backgroundColor = "blue";
    first.style.border = "5px solid green";
    document.getElementById("first").style.margin = "0px auto";
    // document.getElementById("first").style.transform = "rotate(45deg)";
    // 修改内容,可以解析里面的标签
    // innerHTML可以解析字符串里面的标签
    // innerText不能解析,可以写留言板
    first.innerHTML = "<p>福</p>";
    first.innerText = "<p>福</p>";
    console.log(first.innerHTML);
    console.log(first.innerText);
    // 通过类名获取一组元素
    var uNames = document.getElementsByClassName("uName");
    //获取,修改输入框都使用value
    uNames[0].value = "没点击前";
    console.log(uNames[0].value);
    // 通过标签名获取
    var button = document.getElementsByTagName("input")[1];
    //添加点击方法.每次点击都会执行下面这个函数
     var a  = 1;
     button.onclick = function(){
        console.log(123);
         a++;
        first.style.transition = "1s";
        first.style.width = a * 10 + "px";
        first.style.height = "100px";
        uNames[0].value = "第"+(a-1)+"次点击----"+"宽"+ a*10+"px"
     }
</script>
</html>

2.简单加减计算

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #num{
        width: 50px;
        text-align: center;
    }
    </style>
</head>
<body>
<script type="text/javascript">a();</script>
<input type="button" value="-"  onclick="sck()">
<input type="text" value="0" id = "num" onblur="validate(this.value)">
<input type="button" value="+"  onclick="sck2()">
<!-- <input type="button" name="" value="+" > -->
</body>
<script type="text/javascript">
        function validate(hh){
        var reg = /^\d+$/;              
               if (!reg.test(hh)) {                  
                   alert("请输入数字");
               }

    }
function sck(){
    var num2  =   document.getElementById("num").value;
    console.log(123);
    var b = parseInt(num2);
    b--;
    if (b < 0) {
        b = 0;
    }
    document.getElementById("num").value  = b;
}
function sck2(){
    var num2  =  document.getElementById("num").value;
    var b = parseInt(num2);
    b++;
    console.log(123);
    document.getElementById("num").value  = b;
}

</script>
</html>

2.简单计算机

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #num{
        width: 50px;
        text-align: center;
    }
    </style>
</head>
<body>
<script type="text/javascript">a();</script>
<input type="button" value="-"  onclick="sck()">
<input type="text" value="0" id = "num" onblur="validate(this.value)">
<input type="button" value="+"  onclick="sck2()">
<!-- <input type="button" name="" value="+" > -->
</body>
<script type="text/javascript">
        function validate(hh){
        var reg = /^\d+$/;              
               if (!reg.test(hh)) {                  
                   alert("请输入数字");
               }

    }
function sck(){
    var num2  =   document.getElementById("num").value;
    console.log(123);
    var b = parseInt(num2);
    b--;
    if (b < 0) {
        b = 0;
    }
    document.getElementById("num").value  = b;
}
function sck2(){
    var num2  =  document.getElementById("num").value;
    var b = parseInt(num2);
    b++;
    console.log(123);
    document.getElementById("num").value  = b;
}

</script>
</html>