1、jQuery的css操作
HTML代码
<div></div>
js代码
$(document).ready(function(){ //$("div").css("width","100px"); //设置div的单个css样式 //$("div").css("height","100px"); //$("div").css("background","#FF0000"); //$("div").css({ //设置div多个css样式 // width:"100px",height:"100px",background:"#00FF00"}); $("div").addClass("style1");//添加css Class $("div").click(function(){ //$("div").addClass("style2");//改变css Class //$("div").removeClass("style2");//移除css Class $(this).toggleClass("style2");//style1和style2切换 }); });
style代码
.style1{ width: 200px;height: 200px; background-color: bisque; } .style2{ background-color: blueviolet; }
2、jQuery之盒子模型
HTML代码
<div></div>
style代码
<style> div{ width: 100px; height: 100px; background-color: aqua;margin: 50px; padding: 50px; border: 2px blue solid; } </style>
js代码
/** * 盒子模型 * height() width() innerHeight() 200 内边距不加边框 * outerHeight() 304 外边距加边框 * outerHeight() 内边距加边框 */ $(document).ready(function(){ alert("Width"+$("div").width()); //100 alert("Height"+$("div").height()); //100 alert("innerHeight: "+$("div").innerHeight()); //200 alert("outerHeight: "+$("div").outerHeight()); //204 alert("outerHeight(true): "+$("div").outerHeight(true));//304 });