十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
$(window).width(); //浏览器当前窗口可视区域宽度
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了海沧免费建站欢迎大家使用!
$(document).width();//浏览器当前窗口文档对象宽度
$(document.body).width();//浏览器当前窗口文档body的宽度
$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin
然后把获得总宽度除于2就行了
var kuan=$(window).width()/2;
$(window).height();//是文档窗口高度
$("div").offset().top//是标签距离顶部高度(没有到下面的距离,比如$("div").offset().down)
$("div").offset().left//是标签距离右边高度(没有到下面的距离,比如$("div").offset().right)
$(document).scrollTop();//是滚动条高度
$("div").height();//是标签高度
你要的高度+$("div").height()+[$("div").offset().top-$(document).scrollTop()]=$(window).height();
经过简单的数学变换即可得到你要的值了
获取页面某一元素的绝对X,Y坐标,可以用offset():
var X = $(‘#DivID’).offset().top;
var Y = $(‘#DivID’).offset().left;
获取相对(父元素)位置:
var X = $(‘#DivID’).position().top;
var Y = $(‘#DivID’).position().left;
通过getBoundingClientRect方法获取对象位置,包含: left , top , right , bottom 4个参数值。
jq不会出现这样的问题的,检查下代码存放位置是否正确。另外您的jq是什么版本的?另外如果实在取不到那就用这个
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
。。。。
document.body.clientWidth 用这个原生的 比jq快得快
//获取屏幕坐标
function cpos(x, y) { this.x = x; this.y = y }
var getPos = (Doc) = {
var docs = Doc;
var pos = new cpos(docs.offsetLeft, docs.offsetTop);
docs = docs.offsetParent;
while (docs) {
pos.x += docs.offsetLeft;//不断叠加与祖先级的距离
pos.y += docs.offsetTop;
docs = docs.offsetParent;
}
return pos;
}
var foo = document.getElementById('控件id');
console.log(getPos(foo));
script type="text/javascript"
$(document).ready(function()
{
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括
border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括
border padding margin
alert(screen.height);//显示器分辨率,只能用JavaScript代码获取
alert(screen.width);
})
/script
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
这个是文件源代码
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title/title
script src="lib/jquery-1.6.min.js" type="text/javascript"/script
script src="lib/jquery.validate.js" type="text/javascript"/script
script src="lib/jquery.validate.messages_cn.js" type="text/javascript"/script
style type="text/css"
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
/style
script type="text/javascript"
$(document).ready(function(){
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
}
});
});
/script
/head
body
form class="cmxform" id="commentForm" method="get" action=""
fieldset
legend一个简单的验证带验证提示的评论例子/legend
p
label for="cusername"姓名/label
em*/eminput id="cusername" name="username" size="25" /
/p
p
label for="cemail"电子邮件/label
em*/eminput id="cemail" name="email" size="25" /
/p
p
label for="curl"网址/label
em /eminput id="curl" name="url" size="25" value="" /
/p
p
label for="ccomment"你的评论/label
em*/emtextarea id="ccomment" name="comment" cols="22"/textarea
/p
p
input class="submit" type="submit" value="提交"/
/p
/fieldset
/form
/body
/html
现在的问题是 在IE浏览器是可以验证的 在遨游 360等浏览器里面直接用浏览器打开也是可以验证的,但是用http访问, IE下正常,360 遨游等下面就不行了 。
似乎是浏览器设置的问题。我刚开始试也不行,后来把360的网页设置那里的网页内容和网页增强的选项都不选,然后点Internet 选项,把安全级别和隐私级别都设置为中,就好了。