jQuery CSS
程序员文章站
2022-04-28 07:56:24
...
- jQuery CSS方法
1)、用.css()来操作页面中的样式 有两种方法
$(document).ready(function(e) {
//第一种方法 一个一个的引入
// $("div").css("height","100px");
// $("div").css("width","100px");
// $("div").css("background-color","red");
//第二种方法用数组的形式来控制样式
$("div").css({
"width":"100px",
"height":"100px",
"background-color":"red",
});
});
2)、用.addClass()方法
第一步先引入外部样式
<!--首先在文档中引入CSS文件-->
<link type="text/css" rel="stylesheet" href="http://127.0.0.1/web/jQCss.css">
然后在Js文件中调用.addClass ()方法
//直接写入类名即可
$("div").addClass("style1");
3)、.toggleClass()方法
$("div").on("click",function(){
//点击div更换div的样式
//$(this).addClass("style2");
//点击div移除style1的样式
//$(this).removeClass("style1");
//点击不停的切换样式
$(this).toggleClass("style2");
});
- jQuery 盒子模型
1)、.heigth()和.width()方法
只包含元素本身的高度 不包含内边距(padding)边框(border)和外边距(margin)
2)、.innerHeight()和.innerWidth()
包含了本身的高度 内边距(padding)不包含外边距(margin)和边框(border)
3)、.outerHeight()
一个是包含参数的
.outerHeight(true):包含元素本身的高度、内边距、边框和外边距即整个盒子的全部高度
一个是不包含参数的
.outerHeight():包含元素本身高度、内边距和边框
推荐阅读
-
DIV+CSS实现圆角_html/css_WEB-ITnose
-
jquery判断复选框是否选中进行答题提示特效_jquery
-
css3 伪对象选择器添加几何图形文字的方法
-
详解Bootstrap的纯CSS3箭头按钮样式
-
jquery ajax 局部无刷新更新数据的实现案例
-
html页面渲染的原理及优化_html/css_WEB-ITnose
-
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)_jquery
-
JSP网页实现拼音和汉字的上下对齐_html/css_WEB-ITnose
-
dhtmlx_html/css_WEB-ITnose
-
HTML入门基础_html/css_WEB-ITnose