操作各种样式及标签属性

一.操作各种样式

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获取输入框的值