当另一个div类在另一个属性中有某个值时，如何更改CSS类属性？

Question

我对这件事有点陌生，但我正试着让这件事起作用。

<script>
if $('.twentytwenty-handle').css({ 'left': '400px' })
{
    $('.hero').css({ 'display': 'none' });
}
</script>

我实际上想要实现的是，当<div class=twentytwenty-handle style=left: 400px;>和它等于或大于400px时，对于.hero来说，可以去掉一个display: block;属性，以使.hero2出现。

编辑：

在我的.twentytwenty-handle文件中，div不是一个div，而是ZURB二十个插件github的jquery.twentytwenty.js文件中的一个div。我本质上想要的是，当.twentytwenty-handle被一路移动(如果可能的话)时，它会使我的.hero div变成.hero2。同时，我希望它在移动到左边的时候转换成.hero3。

Answer 1

下面是一种使用javaScript来查看在CSS属性和元素CSS属性中发生了什么的机制。基于CSSStyleDeclaration。

​

function testPosition(){  
  var element = document.querySelector('.twentytwenty-handle');
  var cssProps = getComputedStyle(element);
  // console.log(cssProps);
  var trackItem1  = parseInt(cssProps.left);
  console.log("trackItem1:" + trackItem1);
   if (trackItem1 >= 400) {
      //alert("You went over 400");
      //$(".hero").last().addClass( "hilite" );
      //$(".hero").hide();
      $(".hero").fadeOut(500);
   } else{
    $(".hero").fadeIn(500);
  };
    $("#infoBox").html(
  "CSSStyleDeclaratio: " + '<br>' +   
  cssProps.left + '<br>' +
  cssProps.top + '<br>' +
  cssProps.color + '<br>' +
  cssProps.width + '<br>' +
  cssProps.height
  );

}

body {
  margin: 1rem;
  font-size: .9rem;
}

.twentytwenty-handle {
  position: relative;
  display:block;
  left: 0px;
  top: 20px;
  width: 300px;
  height: 80px;
  background: #333;
  color: yellow;
}

.hero {
  position: relative;
  display:block;
  left: 0px;
  top: 30px;
  width: 300px;
  height: 80px;
  background: #333;
  color: yellow;
}
.twentytwenty-handle > p, .hero > p {
    padding: 25px 20px;
}

.hilite {
  font-color: red;
  font-size: 3rem;
}

#infoBox {
  margin-top: 30px;
  padding: 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button onclick="testPosition()" type="button" class="btn btn-primary btn-sm">Check CSS properties</button> <span>Change 'left' value for .twentytwenty-handle and then click on button. </span>
<div class="twentytwenty-handle">
  <p>This is twentytwenty-handle</p>
</div>

<div class="hero">
  <p>This is hero</p>
</div>
<div id="infoBox">
</div>

​

Answer 2

我想你想要这个：

if ( $('.twentytwenty-handle').css('left').replace(/[^-\d\.]/g, '') >= 400 )
{
    $('.hero').css('display', 'none');
    $('.hero2').show();
}

我创建了一个工作示例的jsFiddle。

向扎科夫亚 ( https://stackoverflow.com/a/1100653/1430996 )致敬