Question

如果宽度大于100，我想更改背景颜色。

这是我的代码，但它不起作用。

感谢您的帮助！

<html>
<head>
<style type="text/css">
div#mydiv {
    width: 200px;
    height: 100px;
    background-color: red;
}
</style>
<script language="JavaScript">
function () {
    var mydiv = document.getElementById("mydiv");
    var curr_width = parseInt(mydiv.style.width);
    if (curr_width > 100) {
    mydiv.style.BackgroundColor = "blue";
    }
}

</script>
</head>
<body>

<div id="mydiv" style=""></div>

</body>
</html>

Answer 1

更改

parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";

要

mydiv.offsetWidth
mydiv.style.backgroundColor = "blue";

Answer 2

使用

var curr_width = mydiv.offsetWidth;

代替

var curr_width = parseInt(mydiv.style.width);

Answer 3

变化：

var curr_width = parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";

为：

var curr_width = mydiv.offsetWidth;
mydiv.style.backgroundColor = "blue";

我已经设置了一个小提琴here。

还要注意我把它从功能中拿出来，因为它看起来好像没有在任何地方被调用。您还应该将脚本从头部移动到body标签的底部或使用window.onload。

<强>更新

Another fiddle with everything together

Answer 4

我认为这是一个重复的问题。无论如何，你的curr_width初始化不需要包括parseInt。 parseInt用于将值转换为整数类型，在这里你不需要它。

您的代码可以重写为

<html>
    <head>
    <style type="text/css">
    div#mydiv {
        width: 200px;
        height: 100px;
        background-color: red;
    }
    </style>
    <script language="JavaScript">
    function () {
        var mydiv = document.getElementById("mydiv");
        var curr_width = mydiv.offsetWidth;
        if (curr_width > 100) {
        mydiv.style.BackgroundColor = "blue";
        }
    }

    </script>
    </head>
    <body>

    <div id="mydiv" style=""></div>

    </body>
    </html>

Answer 5

假设您的函数被调用onload。这是代码：

<html>
<head>
<style type="text/css">
#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function load(){
var mydiv = parseInt(document.getElementById("mydiv").offsetWidth);
if (mydiv > 100) {
document.getElementById("mydiv").style.backgroundColor = "blue";
}
}

</script>
</head>
<body onload="load();">

<div id="mydiv" style=""></div>

</body>
</html>

<强>的变化：

使用 offsetWidth 获取div的宽度。
使用 backgroundColor 代替 BackgroundColor 。

Answer 6

要获得正确的计算宽度，您需要使用（不够用）方法getBoundingClientRect（）https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

最新的浏览器具有.width属性，否则您只需要right - left即可获得它。

一些评论： - language="JavaScript"没用。像type="text/javascript"一样。这是默认行为。认真。 - 您需要在创建div后执行代码。所以使用onload或者只是在html之后调用代码（就像在我的例子中一样）

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv {
    width: 200px;
    height: 100px;
    background-color: red;
}
</style>
</head>
<body>

<div id="mydiv"></div>

<script>
  /* run the code after the creation of #mydiv */
  var mydiv = document.getElementById("mydiv");
  var clientRect = mydiv.getBoundingClientRect()
  var curr_width = clientRect.width || (clientRect.right - clientRect.left);
  if (curr_width > 100) {
    mydiv.style.backgroundColor = "blue";
  }
</script>
</body>
</html>

以下是一个工作示例http://jsbin.com/xapet/1/edit

警告：要正确执行此操作，建议您在每次调整浏览器大小时执行此代码。也许你可以看看＆＃34;元素查询＆＃34;事情，根据媒体查询限制，这将是一个很好的解决方法。

https://encrypted.google.com/search?hl=en&q=element%20queries%20css

如果宽度更大，则更改背景颜色

6 个答案: