Python全系列 教程
3567个小节阅读:5931.5k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
选择器
DOM操作
CSS操作
事件处理
遍历
动画
获取和设置匹配元素的样式
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
}
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="background-color:#123456;">div容器</div>
<script>
var color = $("div").css("background-color");
console.log(color);
</script>
</body>
</html>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello,itbaizhan</p>
<script>
$("p").css("color", "red");
</script>
</body>
</html>
获取元素的当前高度值宽度值或设置元素的高度值宽度值
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
margin: 5px;
background: rgb(255, 140, 0);
}
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div></div>
<script>
$("div").height(200).width(200)
</script>
</body>
</html>
为元素的当前计算高度值和宽度值,包括padding,但是不包括border
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid red;
margin: 10px;
background: rgb(255, 140, 0);
}
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div></div>
<script>
var currentHeight = $("div").innerHeight();
var currentWidth = $("div").innerWidth();
console.log(currentHeight,currentWidth);
</script>
</body>
</html>
获取元素的当前宽度值和高度值,包括padding,border和选择性的margin
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
border: 10px solid #666;
background-color: red;
}
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div></div>
<p class="text2"></p>
<script>
$(".text2").text("outerWidth:" + $("div").outerWidth() + " , outerWidth(true):" + $("div").outerWidth(true));
</script>
</body>
</html>
实时效果反馈
1. 下列哪个属性是获取一个元素的大小,包括padding,但是不包括border:
A height() , width()
B innerHeight() , innerWidth()
C outerHeight() , outerWidth()
答案
1=>B