标签:
《js篇》
Javascript获取浏览器和屏幕各种高度宽度方法总结
第一种情况就是宽高都写在样式表里,就比如#div1{height:120px;}。这中情况通过#div1.style.height拿不到高度,而通过#div1.offsetHeight才可以获取到高度。
第二种情况就是高是写在行内中,比如style="height:120px;",这中情况通过上述2个方法都能拿到宽度。
综上,
因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
现在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。
CORE代码:
var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
DEMO示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>min-height</title>
</head>
<body>
<div id="demo">
demo
</div>
<script type="text/javascript">
var ele_selector=document.getElementById(‘demo‘)
var true_height=parseInt(selector.offsetHeight);
//假设要设置的min-height的值为400
if (true_height<400) {
selector.style.height="400px";
};
</script>
</body>
</html>
《jquery篇》
DEMO示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>min-height</title>
</head>
<body>
<div class="demo">
demo
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var true_height=parseInt($(".demo").height());
//假设要设置的min-height的值为400
if (true_height<400) {
$(".demo").css("height","400px");
};
});
</script>
</body>
</html>
参考资料:
http://hemin.cn/jq/cheatsheet.html
http://blog.csdn.net/makiyonn/article/details/8587353
http://blog.sina.com.cn/s/blog_51048da70101djoy.html
Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用
标签:
原文地址:http://www.cnblogs.com/kevinCoder/p/4478618.html