JS 初操作元素样式属性+获取元素篇

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);