如果元素B显示在页面上，则更改元素A的CSS

Question

我是JavaScript的新手，所以通过阅读这里的其他帖子，我想出了这个代码，但我在我的网站上遇到了问题(仅供参考，我是在Webflow上构建的)。

我想要做的是：Example

我设计了一个旋转木马，如果你点击左边的文本触发器，它会在右边的容器上显示不同的内容。不同信息的显示是基于切换显示属性的CSS3交互，而不是基于JavaScript。

因此，如果元素B显示在网页上，那么元素A将具有粗体字体粗细，较深的灰色，并在侧面有一个蓝色边框，以指示它是活动触发器。

下面是我的代码示例(因为我构建在Webflow上，所以我自己在这里重新创建html和css )：

​

var elemB = document.getElementById("element-b");
var elemA = document.getElementById("element-a");
if (elemB.style.display = "inline-block") {
  elemA.style.color = "#505050";
  elemA.style.font - weight = "extra-bold";
  elemA.style.border - right = "6px solid #01aae4";
} else {
  elemA.style.color = "#878787";
}

.carousel {
  position: relative;
  width: 750px;
  height: 500px;
  display: inline-block;
}

.dynamic-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 65%;
  padding: 20px;
  display: none;
}

.on-load {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
  display: inline-block;
}

.carousel-left {
  position: relative;
  float: left;
  width: 35%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-itens: flex-end;
}

<div class="carousel">
  <div class="on-load" id="on-load">Show on Load</div>
  <div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
  <div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
  <div class="dynamic-content" id="element-b">Element B</div>
  <div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
  <div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
  <div class="carousel-left">
    <div class="carousel-link" id="link-1">Link 1</div>
    <div class="carousel-link" id="link-2">Link 2</div>
    <div class="carousel-link" id="element-a">Element A</div>
    <div class="carousel-link" id="link-4">Link 4</div>
    <div class="carousel-link" id="link-5">Link 5</div>
  </div>
</div>

​

谢谢!

Answer 1

您需要一些东西来触发检查，以确定#element-b是否可见。

下面，我建议在.carousel上使用一个单击事件处理程序，它是一个容器。然后，您可以在if语句中使用jQuery :visible选择器。

​

let elemB = $("#element-b");
let elemA = $("#element-a");

// Force the element b to be showing (just for the demo here)
elemB.show()

$(document).on("click", ".carousel", function() {
  setTimeout(() => {
    if (elemB.is(":visible")) {
      console.log("Element B is visible.")
      elemA.css({
        "color": "#505050",
        "font-weight": "extra-bold",
        "border-right": "6px solid #01aae4"
      })
    } else {
      console.log("Element B is not visible.")
      elemA.css({
        "color": "#878787"
      })
    }
  }, 350); // Ajust this timeout.
});

.carousel {
  position: relative;
  width: 750px;
  height: 500px;
  display: inline-block;
}

.dynamic-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 65%;
  padding: 20px;
  display: none;
}

.on-load {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
  display: inline-block;
}

.carousel-left {
  position: relative;
  float: left;
  width: 35%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-itens: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
  <div class="on-load" id="on-load">Show on Load</div>
  <div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
  <div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
  <div class="dynamic-content" id="element-b">Element B</div>
  <div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
  <div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
  <div class="carousel-left">
    <div class="carousel-link" id="link-1">Link 1</div>
    <div class="carousel-link" id="link-2">Link 2</div>
    <div class="carousel-link" id="element-a">Element A</div>
    <div class="carousel-link" id="link-4">Link 4</div>
    <div class="carousel-link" id="link-5">Link 5</div>
  </div>
</div>

​

现在..。我假设您处理clicks或任何事件来显示/隐藏右侧的元素。

Answer 2

• A)您未正确设置样式规则

它应该是：

  elemA.style.fontWeight = "extra-bold";
  elemA.style.borderRight = "6px solid #01aae4";

font-weight在javaScript fontWheight中，border-right在borderRight中也是如此。

​

var elemB = document.getElementById("element-b");
var elemA = document.getElementById("element-a");
if (elemB.style.display = "inline-block") {
  elemA.style.color = "#505050";
  elemA.style.fontWeight = "extra-bold";
  elemA.style.borderRight = "6px solid #01aae4";
} else {
  elemA.style.color = "#878787";
}

.carousel {
  position: relative;
  width: 750px;
  height: 500px;
  display: inline-block;
}

.dynamic-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 65%;
  padding: 20px;
  display: none;
}

.on-load {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
  display: inline-block;
}

.carousel-left {
  position: relative;
  float: left;
  width: 35%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-itens: flex-end;
}

<div class="carousel">
  <div class="on-load" id="on-load">Show on Load</div>
  <div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
  <div class="dynamic-content" id="dc-2">Dynamic Content 2</div>
  <div class="dynamic-content" id="element-b">Element B</div>
  <div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
  <div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
  <div class="carousel-left">
    <div class="carousel-link" id="link-1">Link 1</div>
    <div class="carousel-link" id="link-2">Link 2</div>
    <div class="carousel-link" id="element-a">Element A</div>
    <div class="carousel-link" id="link-4">Link 4</div>
    <div class="carousel-link" id="link-5">Link 5</div>
  </div>
</div>

​

• B)我将通过getComputedStyle()和测试display:none查找样式，这样您就可以使用任何其他display值..

可能的例子

​

function test() {
var elemB = document.querySelector("#element-b");
 var test = window.getComputedStyle(elemB) ;
var elemA = document.getElementById("element-a");
  if(elemB.style.display != "none"){
    elemA.style.color = "red";
    elemA.style.fontWeight = "extra-bold";
    elemA.style.borderRight = "6px solid #01aae4";
    }
  
  else{
    elemA.style.color = "#878787";
    }
  
}
for (e of document.querySelectorAll('.carousel-left .carousel-link')) {
   e.addEventListener("click", function() {
     test();
   })
}

.carousel {
  position: relative;
  width: 750px;
  height: 500px;
  display: inline-block;
}
.dynamic-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 65%;
  padding: 20px;
  display: none;
}
.on-load {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
  display: inline-block;
}
.carousel-left {
  position: relative;
  float: left;
  width: 35%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-itens: flex-end;
}
#element-b { 
  display:inline-block;
}

<div class="carousel">
  <div class="on-load" id="on-load">Show on Load</div>
  <div class="dynamic-content" id="dc-1">Dynamic Content 1</div>
  <div class="dynamic-content" id="dc-2">Dynamic Content 2</div>  
  <div class="dynamic-content" id="element-b">Element B</div>  
  <div class="dynamic-content" id="dc-3">Dynamic Content 3</div>
  <div class="dynamic-content" id="dc-4">Dynamic Content 4</div>
  <div class="carousel-left">
    <div class="carousel-link" id="link-1">Link 1</div>
    <div class="carousel-link" id="link-2">Link 2</div>
    <div class="carousel-link" id="element-a" >Element A (click to perform test)</div>
    <div class="carousel-link" id="link-4">Link 4</div>
    <div class="carousel-link" id="link-5">Link 5</div>
  </div>
</div>

​