Question

我正在寻找正确的仅Javascript（不是JQuery）代码，如果浏览器的宽度为＆lt;则将div宽度从100％更改为1000px。 1000像素。如果浏览器大小> 1000px，代码将更改回100％。在学习JQuery之前，我决心学习JavaScript！我可以找到JQuery解决方案的负载，但想学习JS！在小提琴中我想改变名为“红色”的div元素。原因是因为最小宽度：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>

Answer 1

试试这个

window.onload = function() {
    var browserWidth = document.body.clientWidth;
    if(browserWidth < 1000) {
        document.getElementById('red').style.width = '1000px';
    }
};

Answer 2

对于旧的ie，您可以在标头，外部文件或css中的expression中使用javascript。

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

基线是：

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

在CSS文件中

width: expression( document.body.clientWidth < 1001 ? "100px" : "auto" ); /* set min-width for IE */

Answer 3

像这样：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";
    }
}

Answer 4

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%';
}

Answer 5

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;
}

从宽度改变div：100％;宽度：1000像素;当＆lt; 1000px（Javascript）

5 个答案: