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