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>

Are you looking to add CSS to the page? Or parse CSS for use in your JavaScript application? — Brad
– Brad, Commented Jul 6, 2012 at 5:47
I'm guessing you're looking for something like document.getElementById('element_id').onMouseOver(some function) — MusikAnimal
– MusikAnimal, Commented Jul 6, 2012 at 5:48
@Brad i want to include the css hover for the functions in the javascript. for example suppose if i want to include the css in the function "drawSegmentLabel: function(canvas, context, i, isSelected)" so that the value changed when it is hovered. Thanks in advance. — Praveen Singh
– Praveen Singh, Commented Jul 6, 2012 at 5:57

jintian · Accepted Answer · 2012-07-06 07:19:21Z

13

create style element and write some style rules.

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

set cssText, new rules will rewrite olds;

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

set style dierectly
```
document.body.style.color = 'black';
```

there may be some other tricks.

answered Jul 6, 2012 at 7:19

jintian

1814 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maurice · Accepted Answer · 2012-07-06 06:50:31Z

0

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.

answered Jul 6, 2012 at 6:50

Maurice

27.7k5 gold badges52 silver badges62 bronze badges

Comments

Abhijat · Accepted Answer · 2012-07-06 07:05:30Z

-1

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

answered Jul 6, 2012 at 7:05

Abhijat

11 bronze badge

Collectives™ on Stack Overflow

How to include CSS inside a JavaScript file

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related