How to include css inside a javascript file

Question

Am newbie to to html, css and javascript. Currently am working on javascript to create piechart. my doubt is how can i include a css hover function within a function. CAn anyone help me to include css hover inside a function in the javascript included here. Thanks in advance

<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

1. create style element and write some style rules.

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

2. set cssText, new rules will rewrite olds;

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

3. set style dierectly

    document.body.style.color = 'black';  

there may be some other tricks.

Answer 2

I would recommend you start with jQuery as it is much easier to use than plain JavaScript and DOM manipulation.

Take a look at the hover event and the css() function.

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>