欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery CSS

程序员文章站 2022-04-28 07:56:24
...
  1. 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");
	});
  1. jQuery 盒子模型
    1)、.heigth()和.width()方法
    只包含元素本身的高度 不包含内边距(padding)边框(border)和外边距(margin)
    2)、.innerHeight()和.innerWidth()
    包含了本身的高度 内边距(padding)不包含外边距(margin)和边框(border)
    3)、.outerHeight()
    一个是包含参数的
    .outerHeight(true):包含元素本身的高度、内边距、边框和外边距即整个盒子的全部高度
    一个是不包含参数的
    .outerHeight():包含元素本身高度、内边距和边框
相关标签: 学习 CSS