常用DIV操作

最新推荐文章于 2022-03-30 21:05:56 发布

原创最新推荐文章于 2022-03-30 21:05:56 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

jqurey 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用DIV操作</title>
</head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<style type="text/css">
#div1{
height:200px;
width:200px;
background-color:red;
}
</style>

<script type="text/javascript">
$(function(){
//为获取按钮注册事件
$("#get").click(function(){
//$("#ht").val($("#div1").height()); .hetght获取是整数 .css("height")获取是字符串带px
//$("#wd").val($("#div1").width());

$("#ht").val($("#div1").css("height"));
$("#wd").val($("#div1").css("width"));
});
$("#set").click(function(){
//$("#div1").height($("#ht").val());
//$("#div1").width($("#wd").val());

//$("#div1").height($("#ht").val()).width($("#wd").val()); 链式

//$("#div1").css({height:$("#ht").val(),width:$("#wd").val()});
//$("#div1").css("height",$("#ht").val()).css("width",$("#wd").val());

$("#div1").css("height",$("#ht").val()).width($("#wd").val());

});
});
</script>
<body>
高度：<input type="text" id="ht">宽度：<input type="text" id="wd">
<input type="button" id="get" value="获取">
<input type="button" id="set" value="设置">
<div id="div1"></div>
</body>

</html>