【Javascript】【CSS】给元素添加CSS样式的多种方式

这里只介绍比较简洁好用的方法，比较麻烦的方式不再介绍

	
	let element = null;
	element.style.width = "500px";

	let element = null;
	element.style.cssText = "width: 500px";

	let element = null;
	element.style.setProperty("width", "500px", "important");

	//给某个元素的style样式添加新属性
	//虽然名为setAttribute，但实际功能是addAttribute，仍然保留style样式的旧属性
	let element = null;
	element.setAttribute("style", "width: 500px");

	//通过插入style节点来添加新样式
	//Rule规则实际上是绑定在Element对象上的，观察控制台style样式并不会看到任何变化
	//将style节点插入到html标签的最下面，这样可以保证优先级最高
	let styleElement = document.createElement("style");
	document.body.parentElement.appendChild(styleElement);
	styleElement.sheet.addRule("div", "width: 500px");

	//所有的样式，最终都会存储到document.styleSheets中
	//所以也可以直接给document.styleSheets添加样式
	//给最后一个sheet对象添加样式，从而保证优先级最高
	let sheets = document.styleSheets;
	let sheet = sheets[sheets.length - 1];
	sheet.addRule("div", "width: 500px");