2016-04-22 3 views
0

У меня есть переменная php, которая содержит значение используемого дискового пространства, доступного в папке.Как использовать переменную php в css

$UsedSpace = $total/20000000*100; 

Теперь я хочу, чтобы использовать значение $ UsedSpace для строки состояния, как это: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_2

Так ширина: 1%; в этом примере теперь должно содержаться значение переменной. Как я могу достичь этого?

+8

Возможный дубликат [добавить переменную php в инструкцию css!] (http: // stackoverf low.com/questions/6800263/add-a-php-variable-to-a-css-statement) –

ответ

1

обзор кода ниже, это поможет, читайте комментарий в HTML разделе

$(document).ready(function(){ 
 
\t \t $width=$("#myBar").data('width'); 
 
\t \t $("#myBar").css("width",$width+"%"); 
 
\t });
#myProgress { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: #ddd; 
 
} 
 

 
#myBar { 
 
    position: absolute; 
 
    height: 100%; 
 
    background-color: #4CAF50; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
<h1>My First JavaScript Progress Bar</h1> 
 

 
<div id="myProgress"> 
 
    <div id="myBar" data-width="11"></div> 
 
    <!-- 
 
    for php: set data-width like bellow 
 
    <div id="myBar" data-width="<?php echo '11'; ?>"></div> 
 
    --> 
 
</div> 
 

 
</body>

+0

Это отлично работает! спасибо за решение –

+0

you'r welcome @JackMaessen –

0

Поместите переменную в HTML/CSS, как это: <?php echo $variable; ?>

+0

Почему голос? Этот ответ работает. –

1

Вы также можете достичь этого с помощью JQuery.

<script> 
    var UsedSpace = <?php echo $UsedSpace; ?>; 
    $('#myBar').css('width', UsedSpace); 
</script> 
0

высчитывает $UsedSpace и использовать его как это:

<div id="myProgress"> 
    <div id="myBar"></div> 
</div> 

<?php $UsedSpace = 500; ?> 

<style> 
#myProgress { 
    position: relative; 
    width: 100%; /*total memory size width */ 
    height: 30px; 
    background-color: #ddd; 
} 

#myBar { 
    position: absolute; 
    width: <?php echo $UsedSpace ; ?>; /*UsedSpace width that is highlighted*/ 
    height: 100%; 
    background-color: #4CAF50; 
} 
</style>