如果宽度较大则更改背景颜色
[英]Change background color if width is bigger
问题描述
I want to change the background color if width is bigger than 100. 
如果宽度大于100，我想更改背景颜色。
This is my code but it doesn't work. 这是我的代码，但是不起作用。
Thanks for any help! 谢谢你的帮助！
<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>
6 个解决方案
解决方案1
2 2014-10-07 09:39:59
Change 更改
parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";
To 至
mydiv.offsetWidth
mydiv.style.backgroundColor = "blue";
解决方案2
0 2014-10-07 09:41:16
use 采用
var curr_width = mydiv.offsetWidth;
instead 代替
var curr_width = parseInt(mydiv.style.width);
解决方案3
0 2014-10-07 09:46:10
Change: 更改：
var curr_width = parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";
to: 至：
var curr_width = mydiv.offsetWidth;
mydiv.style.backgroundColor = "blue";
I have set up a fiddle here . 我在这里摆了一个小提琴。
Also notice I took it out of the function because it looked like it wasn't being called anywhere. 还要注意，我从功能中删除了它，因为它似乎没有在任何地方被调用。 You should also move the script out of the head to the bottom of the body tag or use window.onload. 您还应该将脚本从头部移到body标签的底部，或使用window.onload。
UPDATE 更新
解决方案4
0 2014-10-07 10:11:33
I assume this is a duplicate question. 我认为这是一个重复的问题。 Anyway, your intialization of curr_width need not include parseInt. 无论如何，您对curr_width的初始化不需要包含parseInt。 parseInt is for converting a value to integer type and here you doesnt require it. parseInt用于将值转换为整数类型，在这里您不需要它。
Your code can be re-written as 您的代码可以重写为
<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>
解决方案5
0 2014-10-07 11:10:13
Assuming your function to be called onload. 假设您的函数称为onload。 Here's the code: 这是代码：
<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>
Changes: 变化：
- Use offsetWidth to get the width of the div. 使用offsetWidth获取div的宽度。
- Use backgroundColor instead of BackgroundColor . 使用backgroundColor代替BackgroundColor 。
解决方案6
0 2014-10-08 08:15:33
To get a proper computed width, you need to use the (not enough used) method getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect 为了获得正确的计算宽度，您需要使用（使用的方法不够）getBoundingClientRect（） https://developer.mozilla.org/zh-CN/docs/Web/API/element.getBoundingClientRect
Latest browsers have .width property, otherwise you just need to take right - left to get it. 最新的浏览器具有.width属性，否则，您只需向right - left即可。
Some comments: - language="JavaScript" is useless. 一些评论： language="JavaScript"是没有用的。 Like type="text/javascript" . 就像type="text/javascript" 。 It's the default behavior. 这是默认行为。 Seriously. 说真的 - you need to execute your code after the div has been created. -创建div后，需要执行代码。 So using onload or just by calling the code after in the html (like in my example) 因此，使用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>
Here is a working example http://jsbin.com/xapet/1/edit 这是一个工作示例http://jsbin.com/xapet/1/edit
Warning: to do this properly it's recommended that you execute this code each time the browser is resized. 警告：为正确执行此操作，建议您每次调整浏览器大小时都执行此代码。 Maybe you can take a look to the "element queries" thing, that will be a nice workaround according to media queries limitations. 也许您可以看一下“元素查询”，根据媒体查询的限制，这将是一个不错的解决方法。
https://encrypted.google.com/search?hl=en&q=element%20queries%20css https://encrypted.google.com/search?hl=zh_CN&q=element%20queries%20css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.