操作元素行内样式

元素.style.属性名操作样式，js只能操作行内样式。

其实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过元素.style.属性名的方式修改该属性的值。此时相当于给行内样式增加该属性并赋值，当该元素的行内样式的属性有值时，由于行内样式的优先级大于内嵌样式和外部引入的样式，故最终会应用新的值。

获取script脚本节点后面加载的元素节点的方法

<body>
    <div class="box"></div>
    <script>
        let box1=document.querySelector(".box1");
        console.log(box1);
    </script>
    <div class="box1"></div>
</body>

script脚本节点后面加载的元素节点是无法获取的，因为文档的加载是按照文档树的顺序加载的

方法1

当页面加载完成的事件触发时再去执行获取节点的方式。

window.onload的事件触发条件是页面加载完成即在当html文档加载完毕后，BOM的5大功能都加载完毕

<body>
    <div class="box"></div>
    <script>
        function fn(){
            let box1=document.querySelector(".box1");
            console.log(box1);
        };
        window.onload=fn;
    </script>
    <div class="box1"></div>
</body>

方法2

将执行代码写在js文件中，用脚本标签引入然后标签上添加属性：async和defer

async和defer修饰src如何加载外部引入脚本资源的异步属性，不加修饰符就是同步加载外部引入js脚本资源

<script src="script.js"></script>

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

<script async src="script.js"></script>

有 async，加载和渲染该script标签后续文档元素的过程将和 script.js 的加载同时进行（异步），当加载好了该脚本文件就执行该脚本中的代码，执行完毕后再加载该脚本后续的文档元素。

<script defer src="myscript.js"></script>

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

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

OWK_W5A3~ZGX@156TQ1I)03.png

获取CSS样式的属性值

    <style>
        .box {
            width: 400px;
            height: 200px;
            background-color: gold;
        }
    </style>
    <div class="box" style="color: blue;">AOTU</div>
    <script>
        let box=document.querySelector(".box");
        box.onclick=()=>{
        //在这里可以获取script脚本节点后面的元素：因为这个函数的运行是在用户点击事件触发时
        //此时页面已经加载完毕，它比window.onload更加靠后触发
        console.log(box.style.fontSize);
        console.log(box.style.color);
        console.log(box.style.width);
        };
        
    </script>

通过元素.style.属性名只能获取到行内样式属性的属性值，用引入的CSS文件和style标签内嵌的CSS样式不能获取到具体的属性值，会得到一个空字符串。获取CSS样式的属性值都是返回的字符串，不能直接用于计算。

因为用引入的CSS文件和style标签内嵌的CSS样式是存在于CSS样式结构体中，而元素.style.属性名是DOM操作只能操作DOM Tree中的节点，行内样式是属于属性节点存在于DOM Tree所以元素.style.属性名只能获取到行内样式属性的属性值。

js脚本中需要通过获取计算样式也就是CSS样式结构体来获取用引入的CSS文件和style标签内嵌的CSS样式的样式属性值。

window.getComputedStyle()，返回的是一个style对象就是CSS样式结构体，传入需要获取CSS样式的元素。

获取的style对象没有设置属性值的属性是空字符串

    <style>
        .box {
            width: 400px;
            height: 200px;
            background-color: gold;
        }
    </style>
    <div class="box" style="color: blue;font-size: 16px;">AOTU</div>
    <script>
        let box=document.querySelector(".box");
        box.onclick=()=>{
        //在这里可以获取script脚本节点后面的元素：因为这个函数的运行是在用户点击事件触发时
        //此时页面已经加载完毕，它比window.onload更加靠后触发
        console.log(box.style.fontSize,111);
        console.log(box.style.color,222);
        console.log(typeof box.style.width,333);
        let styleSheet=window.getComputedStyle(box);
        console.log(styleSheet.width,444);
        };
        
    </script>

低版本的IE浏览器获取CSS样式结构体：元素.currentStyle.属性名

智能浏览器获取CSS样式结构体：window.getComputedStyle(元素).属性名

resize属性

resize 属性规定是否可由用户调整元素的尺寸大小。none是默认值，用户无法调整元素的尺寸大小。

注意：resize 属性只有在元素的 overflow 属性不为 "visible" 时才起作用。也就是说，如果希望 resize 属性生效，需要设置元素的 overflow 属性的值为 auto、hidden 或 scroll。

属性值

none：默认值。用户无法调整元素的尺寸大小

both：用户可调整元素的高度和宽度。

horizontal：用户可调整元素的宽度。

vertical：用户可调整元素的高度。

规定可以由用户调整 div 元素的尺寸大小：

document.getElementById("myDIV").style.resize="both";

style属性操作和CSS的resize属性

操作元素行内样式

获取script脚本节点后面加载的元素节点的方法

方法1

方法2

获取CSS样式的属性值

resize属性