怎么用js来调整div的宽度？当大于1024时按照百分比来，当小于1024时按照固定像素来
rt……额……我表述问题表述的不对……我的意思是当窗口的宽度大于1024时按照百分比来，当宽度小于1024像素时按照固定像素来~！恩恩……我怎么好像从网上查的那个获取宽度...
rt……
额……我表述问题表述的不对……
我的意思是当窗口的宽度大于1024时按照百分比来，当宽度小于1024像素时按照固定像素来~！
恩恩……我怎么好像从网上查的那个获取宽度的函数在不同的浏览器中是不同的呢？至少要求ff和ie啊……
186044大哥那个好像不是动态的吧？只能改变一次啊…… 展开
额……我表述问题表述的不对……
我的意思是当窗口的宽度大于1024时按照百分比来，当宽度小于1024像素时按照固定像素来~！
恩恩……我怎么好像从网上查的那个获取宽度的函数在不同的浏览器中是不同的呢？至少要求ff和ie啊……
186044大哥那个好像不是动态的吧？只能改变一次啊…… 展开
展开全部
<html>
<head>
</head>
<body onResize="reSizeDiv()">
<div id="d1" style="width:400px;height:400px;background-color:lightblue;"></div>
<SCRIPT>
reSizeDiv();
function reSizeDiv()
{
var s = document.body.offsetWidth; //(带浏览器边框的宽度)
//var s = document.body.clientWidth; //(不带浏览器边框的宽度)
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
s=window.innerWidth;
var a = 1024; //要变换的临界点
var w = "400px"; //DIV宽度（像素）
var w1 = "40%"; //DIV宽度（百分比）
var d = document.getElementById("d1");
if(s > a)
{
d.style.width = w1;
d.innerHTML = "DIV宽：width="+w1+"<br>DIV高：height=400px<br>当前窗口宽：Width="+s+"px";
}
else
{
d.style.width = w;
d.innerHTML = "DIV宽：width="+w+"<br>DIV高：height=400px<br>当前窗口宽：Width="+s+"px";
}
}
</SCRIPT>
</body>
</html>
<head>
</head>
<body onResize="reSizeDiv()">
<div id="d1" style="width:400px;height:400px;background-color:lightblue;"></div>
<SCRIPT>
reSizeDiv();
function reSizeDiv()
{
var s = document.body.offsetWidth; //(带浏览器边框的宽度)
//var s = document.body.clientWidth; //(不带浏览器边框的宽度)
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
s=window.innerWidth;
var a = 1024; //要变换的临界点
var w = "400px"; //DIV宽度（像素）
var w1 = "40%"; //DIV宽度（百分比）
var d = document.getElementById("d1");
if(s > a)
{
d.style.width = w1;
d.innerHTML = "DIV宽：width="+w1+"<br>DIV高：height=400px<br>当前窗口宽：Width="+s+"px";
}
else
{
d.style.width = w;
d.innerHTML = "DIV宽：width="+w+"<br>DIV高：height=400px<br>当前窗口宽：Width="+s+"px";
}
}
</SCRIPT>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
if(window.screen.width > 1024)
{
document.getElementById("container").style.width="100%";
}
else
{
document.getElementById("container").style.width="1024px";
}
===============
ps:
在javascript中得到当前窗口的高和宽
<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
</SCRIPT>
{
document.getElementById("container").style.width="100%";
}
else
{
document.getElementById("container").style.width="1024px";
}
===============
ps:
在javascript中得到当前窗口的高和宽
<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
</SCRIPT>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
window.onload = function()
{
document.getElementById("container").style.width = window.screen.width > 1024 ? "80%" : "800px";
}
</script>
</head>
<body>
<div id="container" style="background:#09f;">Hello<div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
window.onload = function()
{
document.getElementById("container").style.width = window.screen.width > 1024 ? "80%" : "800px";
}
</script>
</head>
<body>
<div id="container" style="background:#09f;">Hello<div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
