How to include CSS inside a JavaScript file

Question

I'm a newbie to HTML, CSS and JS. Currently I'm working on JavaScript to create a pie chart. My doubt is how can I include a CSS hover function within a function.

Can anyone help me include CSS hover inside a function in the JavaScript code below?

<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');
   styleEl.innerHTML = 'body{color:blue; ... other styles}';
   document.head.appendChild(styleEl);
   

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.