一.操作各种样式
js是不能修改外部的css文件的，只能操作内部和行内的样式
<style id="sty"></style>
<div id="wrap"></div>
let Osty=document.getElementById("sty");
Osty.innerHTML="#wrap{
width:100px;
height:100px;
background-color:#f00;
}"
//这是id的写法,class的写法跟id一样，只要在style标签里加个class名就行了
1.合法操作元素的标签属性(直接点".""操作)
<div id="wrap" class="box" title="操作我吧"></div>
let oDiv=document.getElementById("wrap");
oDiv.title="我来操作你了";
oDiv.className="wrap";//class比较特殊。，需要className代替操作。
oDiv.id="box";//这里改了id之后还是代表着原标签的，不会影响其他操作，这里仅仅只是换了名字而已，但是改了id之后就不在享用原来id的样式了
操作style标签
<div id="wrap" style="width:100px"></div>
let Wrap=document.getElementById("wrap");
Wrap.style.height="100px";//这里通过style增加了高
Wrap.style.backgrounColor="#f00";
/*
以上的比较繁琐，我们可以把他简写成一行
*/
Wrap.style.cssText="width:200px;height:200px;backgroundColor:999"//这就比较好看了
注意：+=是在原来的基础上再添加属性
<div id="wrap" style="width:100px"></div>
let Wrap=document.getElementById("wrap");
Wrap.style.cssText+="height:100px;backgroundColor:#f00";
二.操作自定义标签属性
多重选择器（#wrap.box[title]）;title要加[]代表
1.添加自定义属性
<div id="wrap" ceshi="cs"></div>
三种操作自定义的标签
A：getAttribute():获取自定义属性
<div id="wrap" ceshi="cs"></div>
let Wrap=document.getElementById("wrap");
Wrap.getAttribute("ceshi");
B：setAttribute():设置自定义属性
<div id="wrap" ceshi="cs"></div>
let Wrap=document.getElementById("wrap");
wrap.setAttribute("ceshi","anli");
C：removeAttribute():删除自定义属性
<div id="wrap" ceshi="cs"></div>
let Wrap=document.getElementById("wrap");
wrap.removeAttribute("anli");
备注，这三个元素不仅仅可以操作自定义属性，还可以操作合法属性
课堂小知识：设置内容的方式：innerHTML和innerText,value
innerHTML：可以解析标签结构，innerText却不能！
value获取输入框的值
