<html>
<head>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:blue;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#get").click(function(){
// $("#ht").val($("#div1").height());
// $("#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());
//前面使用css，后面使用width设置
$("#div1").css("height",$("#ht").val()).width($("#wd").val());
});
</script>
</head>
<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>
执行结果1
执行结果2
网友评论