CSS / JS作为条形图加阴影？

Question

我想使用<td>单元格在视觉上“绘制”其旁边单元格中的百分比。我将引入百分比，并希望将其作为图形条的阴影。有没有人试图这样做，用CSS或JS功能更容易吗？我在页面上使用html / php组合。

Answer 1

以下是一个如何完成的简单示例。这只是一个基本的CSS问题：

http://jsfiddle.net/e5wRA/1/

更新栏

Javascript （jQuery）：

var percent = 20;

$('.bar').css({
    width: percent.toString() + '%'
});

<强> PHP：

<tr>
    <td><?php echo $percent; ?>%</td>
    <td class="graph"><div class="bar" style="width:<?php echo $percent; ?>%"></div></td>
</tr>

Answer 2

通常，使用CSS类来设置元素样式是个好主意。然后根据需要使用Javascript更改类名。此方法允许您将表示（CSS）与行为（javascript）分开。