HTML-04 获取修改数据样式

【1.获取要改变的内容，然后改变属性】

1.创建div盒子，按钮可以修改盒子的属性样式

<div οnclick="one()" style="width: 200px;height: 200px;background-color: brown;" id="text1"></div>

    <button οnclick="one()" id="text2">red</button>

2.获得div的样式，然后重新赋值样式     

function one() {

            let onecolor = document.querySelector("#text1");

            onecolor.style.backgroundColor = "red";

        }

​

【2.获取要改变的内容，然后遍历改变属性】

1.按钮变大，得遍历循环修改属性

   <button οnclick="big()">按钮变大</button>

2.遍历修改要改变的属性

        function big() {

            let big = document.querySelector("#text2");

            for (let big of text2) {

                big.style.width = "300px";

                big.style.height = "300px";

            }

​

【3.js使用函数】

1.div +点击函数

    <button οnclick="big()">变大写</button>

2.

  var String = " Researchers say that whileall";//定义一个字符串

 function big() {

            document.write(String.toUpperCase())

        }//字符串名.函数

【4.js获取页面数据求和】

1.   <input id="inp1" type="text" value="" placeholder="请输入内容">

    <input id="inp2" type="text" value="" placeholder="请输入内容">

    <span id="answer"></span>

    <button οnclick="qh()">求和</button>

2.如果都没输出就跳转到百度

       function qh() {

            let v1 = document.getElementById("inp1").value;

            let v2 = document.getElementById("inp2").value;

            document.getElementById("answer").innerHTML = parseInt(v1) + parseInt(v2);

            if (v1.length == 0 || v2.length == 0) {

                window.open("http://www.baidu.com");

                // self.location.href = "http://www.baidu.com"

            }

        }

​

【5.点击按钮改变div的样式】

1.  <button οnclick="viv()">变字体</button>

    <p id="zt1">字体变小 和 改变字体颜色</p>

2.点击

function viv() {

                // let zt0 = document.getElementById("zt0");

                zt1.style.fontSize = "300PX";

                zt1.style.color = "red";

            }