1：添加css样式
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
$(function(){
//css() offset() width() height() innerWidth innerHeight
//outerHeight outerWidth
//scrollTop scrollHeight
/*
//javascript追加样式
var boxDom = document.getElementById("box");
boxDom.style.border = "1px solid red";
boxDom.style.width = "200px";
boxDom.style.height = "200px";
boxDom.style.background = "green";
*/
//jquery
var $divBox = $("#box");
//$divBox.width(200).height(200);
//$divBox.css("border","1px solid red").css("width",200)
//.css("height",200).css("background","green");
/*
//最容易理解的方式
$divBox.css("border","1px solid red");
$divBox.css("width",200);
$divBox.css("height",200);
$divBox.css("background","green");
//连写方法
$divBox.css("border","1px solid red").css("width",200)
.css("height",200).css("background","green");*/
$divBox.css({
"border":"1px solid red",
"width":200,
"height":200,
"background":"green"
});
//$divBox.attr("username","ming").attr("age",20);
$divBox.attr({
"username":"KID",
"age":20,
"email":"6767468789@qq.com"
});
$divBox.removeAttr("username age");//删除属性
});
</script>
</body>
2：获取盒子高度
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#box{height:89px;width:450px;border:1px solid red;padding:1px;margin:1px;background:red;}
</style>
</head>
<body>
<div>
<div id="box">
</div>
</div>
<script type="text/javascript">
$(function(){
//width() height() innerWidth innerHeight
//outerHeight outerWidth
var boxDom = document.getElementById("box");
//alert("盒子的高度和宽度是:"+parseInt(boxDom.offsetWidth)+"-==="+parseInt(boxDom.offsetHeight));//parseInt是转换成数字
//jquery
var $boxDom = $("#box");
var border = $boxDom.css("borderColor");
alert(border);
alert("盒子的高度height和宽度width是:"+$boxDom.width()+"-==="+$boxDom.height());
alert("盒子的高度innerHeight和宽度innerWidth是:"+$boxDom.innerWidth()+"-==="+$boxDom.innerHeight()); //不算border 但是算padding
//都算border padding
//如果设置里面设置为true 算border padding margin
});
</script>
</body>
3：用offset获取第一个元素的位置
此例题为百度补全功能：
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#box{height:209px;width:240px;border:1px solid #bbb;padding:1px;margin:1px;background:#f9f9f9;overflow:auto;display:none;position:absolute;}
#box div{float:left;text-align:left;height:35px;line-height:35px;border-bottom:1px dotted #999;width:100%;}
#box div:hover{background:#333;color:#fff;}
</style>
</head>
<body style="text-align:center;">
<div style="margin:50px auto;">
<input type="text" id="email" />
</div>
<div id="box">
<div>11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
<div>55555</div>
<div>66666</div>
</div>
<script type="text/javascript">
$(function(){
$("#email").focus(function(){
//offset()获取一个元素所在的位置
var offset = $(this).offset();
var left = offset.left;
var top = offset.top+$(this).height()+6;
var $input = $(this);
$("#box").show().css({"left":left,"top":top});
$("#box").find("div").on("click",function(){
var text = $(this).text();
$input.val(text);//给元素赋值
//$("#box").hide("slow");
//$("#box").fadeOut("slow");
$("#box").slideUp(300);//折叠效果
});
});
});
</script>
</body>
4：获取滚动条的高度
可实现时间滚动轴：
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#box{height:289px;width:450px;border:1px solid red;padding:1px;margin:1px;background:red;overflow:auto;}
</style>
</head>
<body>
1.2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。
赞(0) 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。
赞(0) 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。
<div id="box">
1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。
赞(0) 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。
赞(0)1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。
赞(0)
</div>
<input type="button" value="获取滚动条距离顶部的高度" onclick="tm_scroll()">
<script type="text/javascript">
$(function(){
//scrollTop()
//offset()
});
function tm_scroll(){
var $box = $("#box");
var scrollTop = $box.scrollTop();
alert("距离滚动条顶部的高度是:"+scrollTop)
var boxDom = $box.get(0);
var scrollHeight = boxDom.scrollHeight;
alert("滚动条的高度是:"+scrollHeight);
//获取浏览器的滚动条 scrollTop和scrollHeight
var bscrollTop = $(window).scrollTop();
alert("浏览器滚动条距离顶部的scrollTop高度是:"+bscrollTop+"=="+getScrollTop());
alert("浏览器滚动条距离顶部的scrollHeight高度是:"+getScrollHeight());
}
//获取浏览器的滚动条的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight,
document.documentElement.scrollHeight);
}
//获取浏览器的顶部高度
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
</script>
</body>
浙公网安备 33010602011771号