时间戳

首页 > 解决方案 > 根据窗口调整大小动态更改类/属性？

javascript - 根据窗口调整大小动态更改类/属性？

问题描述

每当窗口大小更改时，我都会尝试更改类（或元素的 CSS 属性）$(window).resize(function()

可以在这里看到我正在尝试做的更简单的版本http://jsfiddle.net/cL39emgz/

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

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

谢谢

标签： javascripthtmlcss

解决方案

不确定这是否适合您尝试做的事情，但您可以简单地使用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";
    }
}

推荐阅读