0

如果浏览器的宽度小于 1000 像素，我正在寻找正确的仅 Javascript（不是 JQuery）代码，它将 div 宽度从 100% 更改为 1000 像素。如果浏览器大小>1000px，代码将变回 100%。我下定决心先学JavaScript再学JQuery！我可以找到大量的 JQuery 解决方案，但想学习 JS！在小提琴中，我想更改名为“red”的 div 元素。原因是因为 min-width: 1000px; ie 不支持，因此我想要一个可行的解决方案。非常感谢您的帮助。小提琴的链接在这里：http: //jsfiddle.net/Margate/ddENL/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Positioning</title>

<style type="text/css"> 
#red {position: absolute; margin-top: 100px; width: 100%; min-width: 1000px; height: 400px; background-color: red;} 
#contents {position: relative; top: 10px; width: 1000px; height: 600px; margin: 0px auto; border: 1px solid white;} 
html, body, div {margin: 0; padding: 0; border: 0;}
</style>

</head>

<body style="background-color: black;">

<div id="red"></div>
<div id="contents"></div>
</body>

</html>
4

5 回答 5

1

尝试这个

window.onload = function() {
    var browserWidth = document.body.clientWidth;
    if(browserWidth < 1000) {
        document.getElementById('red').style.width = '1000px';
    }
};
于 2013-06-21T13:55:11.600 回答
1

对于旧的 ie，您可以在 header、extern 文件或 expression在 css 中使用 javascript。

然后它允许在只有 IE 理解的 CSS 文件中插入 javascript。

基准线是： 

 = document.body.clientWidth < 1001 ? "100px" : "auto"

在 CSS 文件中

width: expression( document.body.clientWidth < 1001 ? "100px" : "auto" ); /* set min-width for IE */
于 2013-06-21T13:57:09.227 回答
1

像这样的东西：http: //jsfiddle.net/ddENL/1/？

detectResize();
window.onresize = detectResize;

function detectResize(){
    var redElement = document.getElementById("red");
    var windowWidth = window.innerWidth;

    if (windowWidth < 1000){
        redElement.innerHTML = "Less than 1000";
    } else {
        redElement.innerHTML = "More than 1000";
    }
}
于 2013-06-21T13:59:36.057 回答
1 
var ObjRedDiv=document.getElementById('red');  

/** Get Width Of the browser **/
var browserWidth=window.innerWidth || document.body.clientWidth; 

if(browserWidth<1000) 
{
    ObjRedDiv.style.width='1000px';
}
else
{
    ObjRedDiv.style.width='100%';
}
于 2013-06-21T14:05:21.147 回答
1

JavaScript：

window.onresize = function() {
    var widthViewport = window.innerWidth || document.body.clientWidth;
    var el = document.getElementById('red');

    if( widthViewport < 1000 ) {
        // Append the classname which specifies the fixed width
        el.className += ' fixed_width';
    } else {
        // Remove the classname that fixes the width at 1000px
        el.className = el.className.replace( /(\b\s*fixed_width\b)+/, '' );
    }
};

CSS：

.fixed_width{
    width: 1000px;
}
于 2013-06-21T14:15:32.320 回答