dom——style的操作

获取script脚本节点后面加载的元素节点 是获取不了的 

因为文档的加载是按照文档树的顺序加载的

解决方案一:当页面加载完成的事件触发 再去执行获取节点的方式

function fn(){
				var box2=document.querySelector(".box2")
				console.log(box2)
			}
			window.onload=fn

等onload之后再执行函数

解决方案二:/script-- defer  async  修饰src如何加载外部js资源的异步属性

（前提是要是外部导入的js文件）

====async,defer
脚本的异步加载
1.

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

2.


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

3.


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

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

 

<style>
			.box {
				width: 400px;
				height: 300px;
				background-color: brown;
				cursor: pointer;
			}
		style>
		<div class='box' style="color: red;font-size: 18px;">666div>
<script>
			//点击后 宽高和字体x2
			btn3.onclick = function() {
				//在这里可以获取后面的元素:这个函数运行时 是用户点击 这时候 页面已经加载完毕 它比window.onload事件更加靠后触发
				var box = document.querySelector(".box")
				box.style.fontSize = parseInt(box.style.fontSize) * 2 + 'px'
				// box.style.width=parseInt(box.style.width)*2+'px'//不会生效
				box.style.width = parseInt(window.getComputedStyle(box).width) * 2 + 'px'
 
			}
		script>

 css行内样式可以直接获取，但是是字符串不能做运算先要转换成数字，但是内部就不能获取

window.getComputedStyle(box).width才能获取