爱站程序员基地样式操作
1、设置样式
//设置单个样式$(\"div\").css(\"background-color\",\"red\");//设置多个样式$(\"div\").css({\"width\":100,\"height\":100,//backgroundColor:\"blue\"\"background-color\":\"blue\"})
原理：
domList.__proto__.css=function(key,value){if(typeof key=\"string\"){domList.forEach(function(item,i){item.style[key]=value;})}else{for (var i in key){domList.forEach(function(item,i){item.style[i]=key[i];})}}return this}
2、获取样式属性
var color = $(\"h1\").css(\"color\"):
类样式
1、添加类样式
$(selector).addClass(\"active\")//为指定元素添加类ClassName
2、移除类样式
$(selector).removeClass(\"active\")//为指定元素移除指定类ClassName$(selector).removeClass()//不指定参数，移除所有类。
3、判断有没有类样式
$(selector).hasClass(\"active\")//判断元素是否含有指定ClassName
【注】此时jQuery对象中，只要有一个带有指定类名就是true，所有都不带才是false
例子：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"js/jquery-3.4.1.js\" type=\"text/javascript\" charset=\"utf-8\"></script><style type=\"text/css\">#d1{width: 300px;height: 300px;background: #CCCCCC;opacity: 0;}#d1.active{opacity: 1;}</style></head><body><div id=\"d1\">我是隐藏内容</div><button>显示</button><script type=\"text/javascript\">$(\"button\").click(function(){/* var d1=$(\"#d1\")console.log(d1.hasClass(\"active\"))if(d1.hasClass(\"active\")){d1.removeClass(\"active\")}else{d1.addClass(\"active\")}*/// 这个方法和上面的效果一样,没有就添加,有就删除$(\"#d1\").toggleClass(\"active\")})</script></body></html>
结果：
