jQuery:检查 div: 的 CSS 是否左 == 0

我想更改每个div 的 left=0。

我尝试让jQuery检查。我是这样做的：

if ($('.box').css("left") == "0"){
$('.box').addClass("active");
}

它对我不起作用。有人有解决方案吗？

if ($('.fiets').css("left") == "0") {
$('.fiets').addClass("active");
}

.box {
width: 20vw;
height: 20vw;
background: #6989FF;
position: absolute;
border: solid 1px red;
transition: all 0.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<article class="box"></article>
<article class="box"></article>
<article class="box"></article>
<article class="box"></article>
<article class="box"></article>
</div>

虽然.css()可以对集合进行操作，但它只能在设置属性时执行此操作，而不能在读取其值时执行此操作。如果您尝试这样做，它只会返回集合中第一个元素的值。您必须迭代每个元素。

此外，如@Stefan所述，计算值包括px单位。

$('.box').each(function() {
if ($(this).css("left") == "0px") {
$(this).addClass("active");
}
})

你必须指定"left"css属性的单位(即"0px"(

设置px== "0px"
在 CSS 中添加left:0;

if ($('.box').css("left") == "0px"){
$('.box').addClass("active");
}

.box {
	width: 20vw;
	height: 20vw;
left:0;
	background: #6989FF;
	position: absolute;
	border: solid 1px red;
	transition: all 0.2s ease-in-out;
}
.active{
background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
			<article class="box"></article>
			<article class="box"></article>
			<article class="box"></article>
			<article class="box"></article>
			<article class="box"></article>
	</div>

这样的代码。它会起作用。

1.在CSS中添加左=0

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<style>
div.active
{
color:red;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
div_left_value=document.getElementById("box").style.left;
if(div_left_value== '0px'){
$('.box').addClass("active");}
});
});
</script>
</head>
<body>
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid 
blue;background-color:lightblue;left:0" class="box" id="box">ff</div><br>
<button>Display the width of div</button>
</body>
</html>

相关内容

最新更新

热门标签：