5

我是 HTML、CSS 和 JS 的新手。目前我正在使用 JavaScript 来创建一个饼图。我的疑问是如何hover在函数中包含 CSS 函数。

谁能帮我hover在下面的 JavaScript 代码中的函数中包含 CSS？

<script type="text/javascript">
    function PieChart(id, o) {
        this.includeLabels = true;
        if (o.includeLabels == undefined) {
            this.includeLabels = false;
        }
        else {
            this.includeLabels = o.includeLabels;
        }
        this.data = o.data ? o.data : [30, 70, 45, 65, 20, 130]; 
        this.labels = o.labels ? o.labels : ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"];
        this.colors = o.colors ? o.colors : [
                ["#bbddb3", "#1d8e04"], // green
                ["#e2f5b4", "#9edd08"], // yellow green
                ["#fdfbb4", "#faf406"], // yellow
                ["#fbd4b7", "#f2700f"], // orange
                ["#f8bdb4", "#ea2507"], // red
                ["#e2bcbd", "#9e2126"]  // purple
            ];
    
        this.canvas = document.getElementById(id);
    }
    
    PieChart.prototype = {
    
        select: function(segment) {
            var self = this;
            var context = this.canvas.getContext("2d");
            this.drawSegment(this.canvas, context, segment, this.data[segment], true, this.includeLabels);
        },
        draw: function() {
    
            var self = this;
            var context = this.canvas.getContext("2d");
            for (var i = 0; i < this.data.length; i++) {
            this.drawSegment(this.canvas, context, i, this.data[i], true, this.includeLabels);
            }
        },
    
        drawSegment: function(canvas, context, i, size, isSelected, includeLabels) {
            var self = this;
            context.save();
            var centerX = Math.floor(canvas.width / 2);
            var centerY = Math.floor(canvas.height / 2);
            radius = Math.floor(canvas.width / 2);
    
            var startingAngle = self.degreesToRadians(self.sumTo(self.data, i));
            var arcSize = self.degreesToRadians(size);
            var endingAngle = startingAngle + arcSize;
    
            context.beginPath();
            context.moveTo(centerX, centerY);
            context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
            context.closePath();
    
            isSelected ? 
                context.fillStyle = self.colors[i][1] :
                context.fillStyle = self.colors[i][0];
    
            context.fill();
            context.restore();
    
            if (includeLabels && (self.labels.length > i)) {
                self.drawSegmentLabel(canvas, context, i, isSelected);
                
            }
        },
    
        drawSegmentLabel: function(canvas, context, i, isSelected) {
            var self = this;
            context.save();
            var x = Math.floor(canvas.width / 2);
            var y = Math.floor(canvas.height / 2);
            var angle = self.degreesToRadians(self.sumTo(self.data, i));
    
            context.translate(x, y);
            context.rotate(angle);
            context.textAlign = 'center';
            var fontSize = Math.floor(canvas.height / 25);
            context.font = fontSize + "pt Helvetica";
    
            var dx = Math.floor(canvas.width * 0.5) - 100;
            var dy = Math.floor(canvas.height * 0.05);
            context.fillText(self.labels[i], dx, dy+dy);
            alert(self.labels[i]);
            context.restore();
        },
    
        drawLabel: function(i) {
            var self = this;
            var context = this.canvas.getContext("2d");
            var size = self.data[i];
    
            self.drawSegmentLabel(this.canvas, context, i, size, true);
            
        },
    
        degreesToRadians: function(degrees) {
        return (degrees * Math.PI)/180;
        },
    
        sumTo: function(a, i) {
            var sum = 0;
            for (var j = 0; j < i; j++) {
                sum += a[j];
            }
            return sum;
        }
    
    
    }
</script>
4

3 回答 3

13
  1. 创建样式元素并编写一些样式规则。 
    var styleEl = document.createElement('style');
styleEl.innerHTML = 'body{颜色:蓝色; ... 其他样式}';
document.head.appendChild(styleEl);
  2. 设置 cssText，新规则将重写旧规则； 
    document.body.style.cssText = '颜色：#abcdef;';
  3. 直接设置风格 
    document.body.style.color = '黑色';

可能还有其他一些技巧。

于 2012-07-06T07:19:21.493 回答
0

我建议你从 jQuery 开始，因为它比普通的 JavaScript 和 DOM 操作更容易使用。

看看悬停事件和css()函数。

于 2012-07-06T06:50:31.970 回答
0 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("p").hover(function(){
    $("p").css("color","red");
});
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
</body>
</html>
于 2012-07-06T07:05:30.040 回答