一, 使用 obj.className 来修改样式表的类名
- function changeStyle1() {
- var obj = document.getElementById("btnB");
- obj.style.backgroundColor= "black";
- }
缺点: 会覆盖原有的 style(相关课程推荐: JS 视频教程 https://www.html.cn/js/video/ )
二, 使用 obj.style.CSSTest 来修改嵌入式的 CSS
- function changeStyle2() {
- var obj = document.getElementById("btnB");
- obj.style.cssText = " display:block;color:White;
- }
缺点: 会覆盖原有的 style
三, 使用 obj.className 来修改样式表的类名
- function changeStyle3() {
- var obj = document.getElementById("btnB");
- //obj.className = "style2";
- obj.setAttribute("class", "style2");
- }
优点: 不会覆盖
四, 使用更改外联的 CSS 文件, 从而改变元素的 CSS
- <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
- function changeStyle4() {
- var obj = document.getElementById("css");
- obj.setAttribute("href","css2.css");
- }
实现整体页面换肤的最佳方案
五, 通过 JS 更新这个元素的 class 属性
- function addClass(element,value) {
- if (!element.className) {
- element.className = value;
- } else {
- newClassName = element.className;
- newClassName += " "; // 这句代码追加的类名分开
- newClassName += value;
- element.className = newClassName;
- }
- }
来源: http://www.css88.com/qa/javascript/15114.html