Как менять стоимость переменной Javascript в зависимости от свойства css?

Я нуждаюсь в том, чтобы смочь использовать три стоимость переменной DocHeight подчиняясь свойству размера шрифта в css, ошибка находится в if, но я не знаю, как заставлять их функционировать одновременно; независимо они это делают.

if ($(".basic_unit").css("fontSize", 2)){ var DocHeight= 11000;};
if ($(".basic_unit").css("fontSize", 6)){ var DocHeight= 32500;};
if ($(".basic_unit").css("fontSize", 8)){ var DocHeight= 48500;};
var variableXXX = false;
$(window).scroll(function() {
	
    var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
	
     if ( scrollPercent >= 5 && variableXXX == false){
        variableXXX = true;
          alert($(document).scrollTop()); 
      }
});
var variableXX = false;
$(window).scroll(function() {
	
    var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
	
     if ( scrollPercent >= 5 && variableXX == false){
        variableXX = true;
         $(".onscroll5").fadeIn(0); 
      }
	  else if ( scrollPercent < 5 && variableXX == true){
         variableXX = false;
         $(".onscroll5").fadeIn(0); 
     }
});
body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000;  margin-top:0;}
#wraper{width:100%;  padding-top:30px; text-align:center; }
.basic_unit{width:800px; height:1300px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}

.basic2{width:200px; height:200px; background:red; display:none;}
.fixed {position:fixed;}
.center_center{ display:inline-block;z-index:100;}
#container{overflow:hidden; background:rgba(255,0,234,0.20); display:inline-block; }
.left { margin-left:0;  }
.right { right:0;  }
.left_total {left:0;}
.right_total {right:0;}
.center { left:50%; transform:translate(-50%, 0); }
.top { top:30px;; }
.bottom { bottom:0; }
.middle { top:50%; transform:translate(0, -50%); }
.center.middle { transform:translate(-50%, -50%); }
#right_wraper{ float:right; border: 1px black solid; width:300px; text-align:right;}
.intime{width:200px; height:200px; background:blue; display:none;}
.inscroll{width:20px; height:20px; background:yellow; display:none;}
.triggers{ background:rgba(0,255,252,1.00); width:40px; height:40px;}
@media  (max-width: 700px) {
    .basic_unit {
		font-size:2px;
    }
}
@media (min-width:701px) and (max-width : 1200px) {
    .basic_unit {
		font-size:6px;
    }
}
@media (min-width : 1201px) {
    .basic_unit {
		font-size:8px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="wraper">
<div id="container">
<div id="right_wraper">
<!--IN SCROLL--> 
<div class="inscroll fontbig1 onscroll5 fixed middle outtime2 "></div>
</div>


<!--IN SCROLL--> 
<div class="inscroll fontmedium3 onscroll10 fixed bottom center outscroll25 right_left" style="border: solid black 50px"></div>

<!--TRIGGERS--> 
<div class="triggers fixed top left_total">
</div>
<div class="triggers fixed bottom left_total">
</div>
<div class="triggers fixed top right_total">
</div>
<div class="triggers fixed bottom right_total">
</div>
<div class="basic_unit">
A <p style="font-size:6px;">A</p><p style="font-size:8px;">A</p><p style="font-size:2px;">A</p>
</div>

<div class="basic_unit">

</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>


</div>
</div>
1
задан 27.03.2016, 23:13
1 ответ

Ты используешь плохо метод .css jQuery

Он получает стоимость свойства стиля, вычисленного для первого элемента в наборе отборных элементов или устанавливает одну или больше свойств в каждом отборном элементе.

Главным образом

// getter: obtiene el valor de la propiedad como string
var valor = $('selector').css('font-size'); // => retorna 3px o 5px o 10px etc

// setter: establece la propiedad a un valor (10px en este caso) en todos los elementos
// y devuelve el selector jQuery para hacer encadenamiento
var valor = $('selector').css('font-size', 10); // => retorna $('selector')

Что значит, что свойство стиля было вычислено? Значь, что браузер, в зависимости от какого типа свойства он был, будет применять к нему к элементу все стили, которые он соответствует ему используя различные правила языка CSS (как especificidad, наследство, модель ящика, и т.д.) до тех пор, пока он не прибудет в то, что известно как исчисленная стоимость (Браузер может продолжать делать вычисления в зависимости от свойства до того, чтобы прибывать в использованную стоимость и решенную стоимость). Ты можешь находить больше информации о том, как вычисляются свойства в документации MDN

https://developer.mozilla.org/es/docs/Web/CSS/used_value

https://developer.mozilla.org/es/docs/Web/API/Window/getComputedStyle

Ejemplo de propiedad computada

Правильный метод, который ты должен использовать .css('propiedad') возврати цепь с форматом <tamaño><unidad> в твоем случае, так как font-size возврати размер. Имей в виду следующее

Должно иметься в виду, что вычисленный стиль элемента может не быть тот же самый, что стоимость, определенная для этого элемента в листе стилей. Например, вычисленные стили размеров почти всегда находятся в пикселях, но могут быть определенными с em, ex, px или % в листе стилей. Различные браузеры могут возвращать эквивалентную стоимость цвета, но которая не идентичные textualmente, e.j., #FFF, #ffffff, и rgb (255,255,255).

Твой пример может быть исправленным используя

var DocHeight;
var fuente = $(".basic_unit").css("fontSize");
switch (fuente) {
    case '2px': 
        DocHeight= 11000;
        break;
    case '6px':
        DocHeight= 32500;
        break;
    case '8px':
        DocHeight= 48500;
        break;
    default:
        // Aquí pones un valor por defecto
        DocHeight= 48500;
        break;
}

В случае, что ты захотел получить числовую стоимость, ты можешь использовать parseInt

var DocHeight;
var fuente = $(".basic_unit").css("fontSize");
switch (fuente) {
  case '2px':
    DocHeight = 11000;
    break;
  case '6px':
    DocHeight = 32500;
    break;
  case '8px':
    DocHeight = 48500;
    break;
  default:
    // Aquí pones un valor por defecto
    DocHeight = 48500;
    break;
}
var variableXX = false;
$(window).scroll(function() {

  var scrollPercent = 100 * $(window).scrollTop() / DocHeight;

  if (scrollPercent >= 5 && variableXX == false) {
    variableXX = true;
    alert($(document).scrollTop());
    $(".onscroll5").fadeIn(0);
  } else if (scrollPercent < 5 && variableXX == true) {
    variableXX = false;
    $(".onscroll5").fadeIn(0);
  }
});
body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  border-bottom: red 1px solid;
  position: fixed;
  height: 30px;
  z-index: 1000;
  margin-top: 0;
}
#wraper {
  width: 100%;
  padding-top: 30px;
  text-align: center;
}
.basic_unit {
  width: 800px;
  height: 1300px;
  border: rgba(0, 0, 0, 1.00) solid 1px;
  margin: auto;
}
.basic2 {
  width: 200px;
  height: 200px;
  background: red;
  display: none;
}
.fixed {
  position: fixed;
}
.center_center {
  display: inline-block;
  z-index: 100;
}
#container {
  overflow: hidden;
  background: rgba(255, 0, 234, 0.20);
  display: inline-block;
}
.left {
  margin-left: 0;
}
.right {
  right: 0;
}
.left_total {
  left: 0;
}
.right_total {
  right: 0;
}
.center {
  left: 50%;
  transform: translate(-50%, 0);
}
.top {
  top: 30px;
  ;
}
.bottom {
  bottom: 0;
}
.middle {
  top: 50%;
  transform: translate(0, -50%);
}
.center.middle {
  transform: translate(-50%, -50%);
}
#right_wraper {
  float: right;
  border: 1px black solid;
  width: 300px;
  text-align: right;
}
.intime {
  width: 200px;
  height: 200px;
  background: blue;
  display: none;
}
.inscroll {
  width: 20px;
  height: 20px;
  background: yellow;
  display: none;
}
.triggers {
  background: rgba(0, 255, 252, 1.00);
  width: 40px;
  height: 40px;
}
@media (max-width: 700px) {
  .basic_unit {
    font-size: 2px;
  }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .basic_unit {
    font-size: 6px;
  }
}
@media (min-width: 1201px) {
  .basic_unit {
    font-size: 8px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="wraper">
  <div id="container">
    <div id="right_wraper">
      <!--IN SCROLL-->
      <div class="inscroll fontbig1 onscroll5 fixed middle outtime2 "></div>
    </div>


    <!--IN SCROLL-->
    <div class="inscroll fontmedium3 onscroll10 fixed bottom center outscroll25 right_left" style="border: solid black 50px"></div>

    <!--TRIGGERS-->
    <div class="triggers fixed top left_total">
    </div>
    <div class="triggers fixed bottom left_total">
    </div>
    <div class="triggers fixed top right_total">
    </div>
    <div class="triggers fixed bottom right_total">
    </div>
    <div class="basic_unit">
      A
      <p style="font-size:6px;">A</p>
      <p style="font-size:8px;">A</p>
      <p style="font-size:2px;">A</p>
    </div>

    <div class="basic_unit">

    </div>
    <div class="basic_unit">
    </div>
    <div class="basic_unit">
    </div>
    <div class="basic_unit">
    </div>
    <div class="basic_unit">
    </div>


  </div>
</div>
1
ответ дан 24.11.2019, 14:41
  • 1
    Большое спасибо из-за полного ответа, он и # 237; do documentaci и # 243; n, который ты перемещаешь меня, и я применился c и # 243; я говорю, что ты предлагаешь, но contin и # 250; чтобы без функционировать. Смоги быть что contin и # 250; и будучи плохой $ (" .basic_unit") .css (" fontSize"), потому что он не анализирует стоимость fontSize despu и # 233; s применения их c и # 225; lculos @media на tama и # 241; или окна? – Ivan Soler 28.03.2016, 17:54
  • 2
    @IvanSoler Я воспроизвел ты c и # 243; я говорю и переменная fuente распределяется 8px правильно в resoluci и # 243; n большой и в 2px в одной я согрешил и # 241; в. Средний показатель - queries - часть правил, которые применяются перед тем, как получать вычисленную стоимость. Если оно не функционирует, он, потому что у тебя есть другой вирус в c и # 243; я говорю (я elimin и # 233; c и # 243; я говорю дубликат, что hab и # 237; эксперт, помещенный в вопрос). Включи один console.log(DocHeight); или один alert(DocHeight) для того, чтобы ты увидел, что у него есть правильная стоимость. – devconcept 28.03.2016, 18:07
  • 3
    Я скопировал каждые ты c и # 243; я говорю в новом листе и добавляя bot и # 243; n, чтобы знать DocHeight в каждом моменте и #233; ste он не меняется, когда изменение tama и # 241; или окна выстрели в изменение tama и # 241; или шрифта @devconcept тебе что-то приходит в голову? Все функционирует кроме изменения стоимости DocHeight... В Вашем месте пребывает неизменной стандартная настройка DocHeight – Ivan Soler 28.03.2016, 18:12
  • 4
    Хороший Ahhh, это другая вещь! Если ты хочешь обновить переменную DocHeight в redimensionar экран, ты должен вновь осуществлять их c и # 225; lculos внутри события resize немного схвати и # 237; как $(window).on('resize', function() { /* calcular de nuevo y actualizar */}) – devconcept 28.03.2016, 18:17
  • 5
    Если ты имеешь в виду помещать " switch" заменяя " считать снова и actualizar" также я est и # 225; давая оказанный... С этой стратегией DocHeight появись как Undefined. – Ivan Soler 28.03.2016, 18:21