Wie man eine Inhaltseigenschaft in CSS macht, benutze php

Question

Also nehme ich von einem Array einige Informationen für ein barlike Diagramm, das ich machte. Hier ist die CSS:

<style> 
.outer, 
.inner, 
.target { 
    height: 14px; 
    margin-bottom: 5px; 
} 
.outer { 
    background-color: #cccccc; 
    width: 80%; 
    margin: 20px auto; 
    position: relative; 
    font-size: 10px; 
    line-height: 14px; 
    font-family: sans-serif; 
} 
.inner { 
    background-color: green; 
    position: absolute; 
    z-index: 1; 
    text-align: right; 
    border-right: 2px solid black; 
} 
.inner:after { 
    content: '$avg_width'; 
    display: inline-block; 
    left: 10px; 
    position: relative; 
    height: 100%; 
    top: -14px; 
} 
.target { 
    background-color: transparent; 
    width: 19px; 
    position: absolute; 
    z-index: 2; 
    color: black; 
    text-align: right; 
    border-right: 2px dotted black; 
} 
.target:after { 
    content: 'Target: $target_width'; 
    display: inline-block; 
    left: 28px; 
    position: relative; 
    height: 100%; 
    top: 14px; 
} 
.solid_line { 
    color: black; 
    float: right; 
    width: 3px; 
    border-right: 3px solid black; 
    height: 16px; 

} 
</style> 

Hier ist die php:

<?php 

    $target = number_format((float)$data->data[2][32][3], 2, '.', ''); 
    $array = []; 
    $sum = 0; 
    $path = $data->data[2]; 
    $bar_width = '200px'; 
    foreach($path as $key => $item){ 
     if($key > 1 && isset($item[5])){ 
      $array[] = (int)$item[5]; 
      $sum += (int)$item[5]; 
     } 
    } 
    $avg = ($sum/count($array)); 
    $base = max($target, $avg); 
    $target_width = $bar_width/100 * ($target/$base * 100); 
    $avg_width = $bar_width/100 * ($avg/$base * 100); 
    $percent = $avg/$target;      
?> 

Und hier ist die HTML:

<div class="outer"> 
    <div class="target"> 
    </div>     
    <div class="inner"> 
    </div> 
</div> 

Wie Sie sehen, ich versuche Verwendung des Inhalts zu machen Eigenschaft in CSS und PHP in ihm verwenden, aber aus irgendeinem Grund zeigt es nicht die Ergebnisse.

Answer 1

Das liegt daran, dass Sie direkt in CSS auf die PHP-Variable zugreifen. HTML/CSS werden clientseitig ausgeführt, wobei PHP clientseitig ausgeführt wird.

Sie müssen also die PHP-Variable in Ihrem CSS auf der Seite widergeben. Wie folgt aus:

.inner:after { 
    content: '<?php echo $avg_width ?>'; 

Oberhalb echo Code wird auf Server-Seite auszuführen und Wert auf Client-Seite CSS gibt das Element richtig zu machen.

Stellen Sie sicher, Sie verwenden es auf AUF SEITE/INLINE CSS, wird dies nicht auf externe CSS-Dateien arbeiten.