style操作

获取元素：

    <script>

        var box2=document.querySelector(".box2")

        console.log(box2)

    script>

    <div class="box2">666div>

当我们去获取还没有定义的元素时，获取到的就是空。我们的代码是从上到下运行的，在获取box2的代码在定义box2之前就运行了，但是这时候box2还没有定义，所以获取的就是空。

如果一定要这样获取，有两种办法。

//解决方案一：当页面加载完成后再去执行获取节点

//解决方案二：给script加上defer、async属性

 

第一种：

让获取的代码在box2定义之后运行，我们可以将获取的代码放入函数中，在box2定义以后在调用。我们将函数放入window.onload中，window.onload是浏览器中所有的都加载完毕时才运行。

    <script>

        function box2(){

        var box2=document.querySelector(".box2")

        console.log(box2)

        }

        window.onload=box2

    script>

    <div class="box2">666div>

第二种：将js写在js文件中在引入是填写defer、async属性

    <script defer src="./04-test.js">script>

    <div class="box2">666div>

 

 

 

 

====async,defer

脚本的异步加载

1.

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

2.

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

3.

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

 

然后从实用角度来说呢，首先把所有脚本都丢到  之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

 

 

修改元素：

点击按钮，实现改变盒子内的文字的大小

//利用style.fontSize来改变盒子内文字的大小

    <style>

        .box2{

            width: 100px;

            height: 100px;

            background-color:gold;

        }

    style>

    <div class="box2">666div>

    <button>点击变大button>

    <script>

       

        var btn=document.querySelector("button")

        btn.onclick=function(){

            var box2=document.querySelector(".box2")

            console.log(6666)

            box2.style.fontSize=parseInt(box2.style.fontSize)*2+'px'

           

        }

    script>

 

当我们这样设置的，运行代码发现我们单击了按钮也不能改变文字的大小，打印box2.stlye.fontSize发现是一个空字符串。说明document不能获取css样式，我们将css样式添加到行内呢

    <div class="box2" style="font-size:14px;">666div>

这时候再次运行代码，发现就可行了。因为  box2.style.fontSize其实就是添加在行内的。而我们写在css中的样式是保存在样式结构体中的。

如果我们要获取样式结构体中的样式，该怎么办呢？

这时候我们就要使用window.getComputedStyle去获取呈现树中的样式，再来进行修改

            var box=window.getComputedStyle(box2)//获取呈现树中的样式

 

 

 

获取行内样式

    // box.currentStyle.width===>IE678

    // box.style.width====>现代浏览器