Question

是html，css和javascript的新手。目前正在使用javascript创建饼图。我的疑问是如何在函数中包含css悬停函数。任何人都帮我把css悬停在这里包含的javascript函数中。提前致谢

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

Answer 1

创建样式元素并编写一些样式规则。

var styleEl = document.createElement('style');
styleEl.innerHTML = 'body{color:blue; ... other styles}';
document.head.appendChild(styleEl);

设置cssText，新规则将重写旧的;

document.body.style.cssText = 'color:#abcdef;';

正确设置样式
```
document.body.style.color = 'black';
```

可能还有其他一些技巧。

Answer 2

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

查看hover事件和css()功能。

Answer 3

<!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>

如何在javascript文件中包含css

3 个答案: