Question

每当使用$(window).resize(function()

更改窗口大小时，我都试图更改类（或元素的CSS属性）

可以在这里http://jsfiddle.net/cL39emgz/

看到我正在尝试做的一个更简单的版本。

我正在尝试使id="width"元素的文本颜色每次宽度小于500px时变为蓝色，而每次宽度大于（或等于）时都变为红色。

因此，当我调整屏幕大小以更改宽度时，文本应根据屏幕尺寸在蓝色/红色之间变化。

谢谢

Answer 1

您很亲近，但是错过了几件事。

您需要在更改span标签的地方将if语句更改为窗口width的值

对于类，也可以使用classList进行添加和删除

希望这会有所帮助:)

$(window).resize(function() {
    $("#width").text($(this).width());
    $("#height").text($(this).height());
		document.getElementById("width").classList.remove("blue");	
		document.getElementById("width").classList.remove("red");

    if($(this).width() < 500){
    	document.getElementById("width").classList.add("blue");
    }
    else{
    	document.getElementById("width").classList.add("red");
    }
});

.blue {
  color: blue;
}

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Width: <span id="width"></span><br>
Height <span id="height"></span>

Answer 2

不确定这是否符合您要执行的操作，但是您可以简单地使用window.innerWidth()和onresize

HTML：

<body onload="myFunction()" onresize="myFunction()">
    <div id="myDiv">
        Some text
    </div>
</body>

JS：

function myFunction() {
    var div = document.getElementById("myDiv");
    var width = window.innerWidth();
    if (width <= 500) {
        div.style.color = "blue";
    } else {
        div.style.color = "red";
    }
}

根据窗口大小动态更改类/属性？

2 个答案: