一个CSS类在运行时被JS添加到一个元素中，但是它的属性不适用。为什么？ [英] A CSS class is added to an element by JS at runtime, but its properties are not applied. Why?

问题描述

当窗口向下滚动到 .view 时，我一直在监视哪些CSS类属性应用于 .header c>不再可见。类 scroll-header IS添加到 .header 中，但关联的CSS属性不适用。他们的问题是为什么以及如何解决这个问题？



$（document）.ready（function（）{console。 log（script.js is detected）; //检查$（window）.scroll（function（）{console.log（window onscroll being called。）; //检查是否（$（div.view ）.visible（true））{console.log（YES if（$（\div.view\）。visible（true）））; // check $（。header）。removeClass（ .scroll-header）;} else {console.log（NO if（$（\div.view\）。visible（true）））; // check $（。header） .addClass（。scroll-header）;}}）;}）;

  .view {height：500px;宽度：100％; background-color：crimson;}。second {height：2500px;宽度：100％; background-color：purple;}。header {position：absolute;宽度：100％; height：100px;背景颜色：青色; top：0px; left：0px;}。scroll-header {background-color：yellow;位置：固定;宽度：100％;身高：70px; background-color：yellow;} * {border：0px; padding：0px; margin：0px; box-sizing：border-box;}  

<脚本src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =http：//cdn.jsdelivr。 net / jquery.visible / 1.1.0 / jquery.visible.min.js>< / script>< div class =view>。< / div>< div class =header> ;< / div>< div class =second>。< / div>< div class =scroll-headerstyle =bottom：0px;>。< / code>




解决方案

， .visible 不是jquery的一个函数。虽然你可以使用下面的代码来检测你的dom元素是否可见：

  if（$（＃yourElem）。是（：visible）== true）{
 //做某事
} 
 else {
 //做别的事
} 
  

正如您使用jquery.visible插件。你的代码在JavaScript中是错误的。正确的代码：



  $（document）.ready（function（）{
 console.log（script.js ）; //检查
 
 $（window）.scroll（function（）{
 console.log（window onscroll being called。）; //检查$ b $ （$（div.view）。visible（true））{
 console.log（YES if（$（\div.view\）。visible（true））） ; //检查
 $（。header）。removeClass（scroll-header）; 
} else {
 console.log（NO if（$（\div .view）。visible（true）））; //检查
 $（。header）。addClass（scroll-header）; 
} 
}） ; 
 
}）; 
  

您正在添加.scroll-header而不是滚动标题

I have been monitoring what CSS classes properties are applied to .header when the window is scrolled down enough that .view is no longer visible. The class scroll-header IS added to .header, but the associated CSS properties ARE NOT applied. They question is why and how do I fix this?

$(document).ready(function() {
  console.log("script.js is detected"); //check

  $(window).scroll(function() {
    console.log("window onscroll being called."); //check
    if ($("div.view").visible(true)) {
      console.log("YES if ( $(\"div.view\").visible(true) )"); //check
      $(".header").removeClass(".scroll-header");
    } else {
      console.log("NO if ( $(\"div.view\").visible(true) )"); //check
      $(".header").addClass(".scroll-header");
    }
  });

});

.view {
  height: 500px;
  width: 100%;
  background-color: crimson;
}
.second {
  height: 2500px;
  width: 100%;
  background-color: purple;
}
.header {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: cyan;
  top: 0px;
  left: 0px;
}
.scroll-header {
  background-color: yellow;
  position: fixed;
  width: 100%;
  height: 70px;
  background-color: yellow;
}
* {
  border: 0px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="view">.</div>
<div class="header">.</div>
<div class="second">.</div>
<div class="scroll-header" style="bottom:0px;">.</div>

解决方案

as mentioned in comment, .visible is not a function of jquery. Although you can use below code to detect your dom element is visible or not:

if ($("#yourElem").is(":visible") == true) { 
    //do something
}
else {
    //do something else
}

As you are using jquery.visible plugin. Your code is wrong in javascript. Correct code:

$(document).ready(function() {
  console.log("script.js is detected"); //check

  $(window).scroll(function() {
    console.log("window onscroll being called."); //check
    if ($("div.view").visible(true)) {
      console.log("YES if ( $(\"div.view\").visible(true) )"); //check
      $(".header").removeClass("scroll-header");
    } else {
      console.log("NO if ( $(\"div.view\").visible(true) )"); //check
      $(".header").addClass("scroll-header");
    }
  });

});

You were adding .scroll-header instead of scroll-header

这篇关于一个CSS类在运行时被JS添加到一个元素中，但是它的属性不适用。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！