表示異なる値

Question

var fontSize = $('.basic_unit').css('font-size'); 
 
var DocHeight = 11000; 
 
if(fontSize == 6){ 
 
    docHeight = 32000; 
 
}else if(fontSize == 8){ 
 
    docHeight = 48000; 
 
} 
 
var variableXXX = false; 
 
$(window).scroll(function() { 
 
\t 
 
    var scrollPercent = 100 * $(window).scrollTop()/DocHeight; 
 
\t 
 
    if (scrollPercent >= 5 && variableXXX == false){ 
 
     variableXXX = true; 
 
      alert($(document).scrollTop()); 
 
     } 
 
}); 
 
var variableXX = false; 
 
$(window).scroll(function() { 
 
\t 
 
    var scrollPercent = 100 * $(window).scrollTop()/DocHeight; 
 
\t 
 
    if (scrollPercent >= 5 && variableXX == false){ 
 
     variableXX = true; 
 
     $(".onscroll5").fadeIn(0); 
 
     } 
 
\t 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 { 
 
\t \t font-size:2px; 
 
    } 
 
} 
 
@media (min-width:701px) and (max-width : 1200px) { 
 
    .basic_unit { 
 
\t \t font-size:6px; 
 
    } 
 
} 
 
@media (min-width : 1201px) { 
 
    .basic_unit { 
 
\t \t 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>

：

• 場合クラスbasic_unitのフォントサイズ2px,DocHeight=11000px;
• basic_unitのフォントサイズが6pxの場合、 DocHeight=32500px;
• クラスbasic_unitでのフォントサイズはあなたがCSSを設定するのではなく、それは値に一致したならチェックしているDocHeight=38500px;

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;};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

、8pxです。あなたがしたいことは、CSSのプロパティがあなたの希望する値のいずれかと一致するかどうかをチェックすることです。

var DocHeight; 
switch($(".basic_unit").css("fontSize")){ 
    case "2px": 
    DocHeight = 11000; 
    break; 
    case "6px": 
    DocHeight = 32500; 
    break; 
    case "8px": 
    DocHeight = 48500; 
    break; 
} 

これは、フォントサイズ$(".basic_unit").css("fontSize")を取得し、それが見つかった場合DocHeightを設定し、声明の中でそれぞれの値と比較されます。

注：私はあなたがpxを使用していると仮定していますが、emまたは他の可能なユニットにこれを適用できます。

Answer 2

var DocHeight; 

switch ($(".basic_unit").css("fontSize")) { 
    case '2px' : 
     DocHeight = 11000; 
     break; 

    case '6px' : 
     DocHeight = 32500; 
     break; 

    case '8px' : 
     DocHeight = 48500; 
     break; 
} 

Answer 3

まあ、.css()については、jqueryドキュメントを読んだか？

あなたが実行します。.css(property, value)設定値、ではないが得るため

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;}; 

DocHeightは、あれば端から取られます。

私はあなたが価値をckeckする必要があると思いますか？ （） `CSSを設定するよう

var fontSize = $('.basic_unit').css('font-size'); 
var docHeight = 11000; 
if(fontSize == '6px'){ 
    docHeight = 32000; 
}else if(fontSize == '8px'){ 
    docHeight = 48000; 
}