JS 操作元素属性和样式

• 通过点语法, 操作style属性间接操作元素的css样式

  div1.style.width = \"300px\";

• JS里的样式名, 如果出现多个单词, 不再用-链接, 写成驼峰

  div1.style.backgroundColor = \"blue\";

• JS设置的样式, 全部为行间css样式

• 例：随机改变颜色

  var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);div1.style.backgroundColor = \"rgb(\" + r + \",\" + g + \",\" + b + \")\";

  随机改变角度

  var randomDeg = Math.floor(Math.random() * 361);div1.style.transform = \"rotateZ(\" + randomDeg + \"deg)\";

JS 获取元素方式初

• document.getElementById(“id值”);

  通过id值获取元素, 该方法返回的是一个html元素;

• document.getElementsByClassName(“class值”);

  通过class值获取元素, 该方法返回的是一个集合(类似于数组);

• document.getElementsByTagName(“标签名”);

  通过标签名获取元素, 该方法的返回值是一个集合(类似于数组);

• querySelector(“选择器”);

  通过选择器获取元素, 该方法的返回值是html元素, 如果选择器能找到多个元素, 也只返回找到的第一个.

• querySelectorAll(“选择器”);

  通过选择器获取元素, 该方法的返回值是一个集合(类似数组), 哪怕选择器只能找到一个元素, 返回的也是集合.

• 例：

  var container1 = document.getElementById(\"div1\");console.log(container1);var className = \"link1\";var container2 = document.getElementsByClassName(className);var container2 = document.getElementsByClassName(\"link1\");console.log(container2);var container3 = document.getElementsByTagName(\"div\");console.log(container3);var container4 = document.querySelector(\".link1\");console.log(container4);var container5 = document.querySelectorAll(\"ul li\");console.log(container5);