dom元素属性操作（常规属性操作）

dom元素属性操作（常规属性操作）

注：原生js操作样式，只能操作元素的行内样式

1.操作类名称

    console.log(btnlist.className);
    console.log(btnlist.name);
    console.log(btnlist.id);
    console.log(btnlist.style);
    console.log(btnlist.style.width);
    console.log(btnlist.style.height);

执行结果：

2.设置属性

• 设置类
  （1）btnlist.className=“btn pink”;
  （2）add：添加 /remove：移除/toggle：移除

  console.log(btnlist.classList);//  返回元素的class 列表
   btnlist.classList.add("data");//  类添加
    console.log(btnlist.classList.contains("pink"));/  /检测元素是否具有某个类  true false
    console.log(btnlist.classList.length);//  输出元素类几个
    btnlist.classList.remove("data");//  移除类
    //toggle  参数2  boolean  true  添加   false  移除   可以不写
    btnlist.classList.toggle("pink",false);//  类别的切换`

• 设置style

    btnlist.style.width="200px";
    btnlist.style.backgroundPosition="0px 0px";
    btnlist.style.border="1px solid red";

    btnlist.style="width:120px;height:30px; color:blue;"/*复合属性*/

3.设置自定义属性
第一步（设置自定义属性）：btnlist.setAttribute("cls-tag","自定义");
第二步（自定义属性的获取）：console.log(btnlist.getAttribute("cls-tag"));
4.获取当前元素的非行内样式方法

console.log(window.getComputedStyle(btnlist).backgroundColor);