Question

我正在为一个类做一个作业，我必须创建一个外部JavaScript文件来检查页面的当前宽度并根据它更改链接的CSS样式，并在页面加载或调整大小时发生。通常情况下，我们会给出一个基于我们的分配的例子，但这次并非如此。

基本上我们要使用if ... then语句来改变样式。我不知道该函数的适当陈述是什么。我环顾四周，潜在的解决方案要么在课堂上太先进，要么不要超过我的需要。据我所知，我不能使用jQuery或CSS查询。

如果有人能给我一个如何写出来的例子，我会非常感激。

Answer 1

试试此代码

html是

<div id="resize" style="background:red; height: 100px; width: 100px;"></div>

javascript是

var resize = document.getElementById('resize');
window.onresize=function(){
    if(window.innerWidth <= 500) {
        resize.style = "background:blue; height: 100px; width: 100px;";
    }
    else {
        resize.style = "background:red; height: 100px; width: 100px;";
    }
};

我已经为您创建了一个样本TESTRESIZE 尝试调整浏览器大小，让我知道它是否正在寻找。

Answer 2

//使用此//

function adjustStyle() {
var width = 0;
// get the width.. more cross-browser issues
if (window.innerHeight) {
    width = window.innerWidth;
} else if (document.documentElement && document.documentElement.clientHeight) {
    width = document.documentElement.clientWidth;
} else if (document.body) {
    width = document.body.clientWidth;
}
// now we should have it
if (width < 799) {
    document.getElementById("CSS").setAttribute("href",     "http://carrasquilla.faculty.asu.edu/GIT237/smallStyle.css");
} else {
    document.getElementById("CSS").setAttribute("href", "http://carrasquilla.faculty.asu.edu/GIT237/largeStyle.css");
}
}

// now call it when the window is resized.
window.onresize = function () {
adjustStyle();
};
window.onload = function () {
adjustStyle();
};

Answer 3

使用CSS和媒体查询。用js改变风格是个坏主意。

使用JavaScript根据页面宽度更改CSS样式

3 个答案: