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

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

感谢您的帮助！

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

来源

2014-10-07 user3581595

你的函数没有名字？你在哪里打电话？ – mithunsatheesh 2014-10-07 09:41:22

变化

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

要

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

来源

2014-10-07 09:39:59 danhardman

使用

var curr_width = mydiv.offsetWidth;

代替

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

来源

2014-10-07 09:41:16

变化：

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

到：

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

我已成立了一个小提琴here。

另请注意，我将它从函数中取出，因为它看起来好像没有被调用到任何地方。您还应该将脚本移出正文标签底部或使用window.onload。

UPDATE

Another fiddle with everything together

来源

2014-10-07 09:46:10

我正在使用wamp，仍然不会工作，当我想在wamp上测试它时... – user3581595 2014-10-07 09:51:45

试试这个小提琴：http://jsfiddle.net/ms66hjuz/ – 2014-10-07 09:56:39

我认为这是一个重复的问题。无论如何，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>

来源

2014-10-07 10:11:33 boniezuvyz

假设你要调用的函数的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。

来源

2014-10-07 11:10:13 Leo

为了得到正确的计算宽度，你需要使用（没有足够使用）方法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

警告：这样做正确我们建议你执行此代码每次浏览器调整大小时。也许你可以看看“元素查询”的东西，根据媒体查询的限制，这将是一个很好的解决方法。

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

来源

2014-10-08 08:15:33 MoOx

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

回答

相关问题