Use addClass in jQuery to call a CSS class written in another file

Question

I want to call a CSS class written in a CSS file from a JQuery function (external file too).

It doesn't work I wonder why :

jQuery :

/// <reference path="jquery-1.7.1.js" />
/// <reference path="jquery-1.7.1-vsdoc.js" />
/// <reference path="main_style.css" />
    function gg() {
        alert("zombie");
        $("p").addClass("blood");
    };

CSS :

.blood
{
    color: Aqua;
    background-color: Red;
    border: 2;
    font-weight: bold;
}

I added a reference to CSS file in the jQuery file and I don't uderstand why it doesn't find it and doesn't change all the paragraphs.

But the "gg" function is reached because I see the zombie alert.

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<link href="Scripts/main_style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/mon_script.js" type="text/javascript"></script>


<title></title>
</head>
<body>
<div>
<p>This is the first paragraph</p>
<p id="4">This is the second paragraph</p>
<p>This is the third paragraph</p>
<p class="blood">This is the fourth paragraph</p>
<input type = "button" value="Hi" onclick="gg()" />

</div>
</body>
</html>

Update your question when you have additional information (like things you've tried that aren't working), instead of putting it in the comments on answers. That way everyone can more easily help with the problem. — ThinkingStiff
– ThinkingStiff, Commented Dec 11, 2011 at 18:24

BrokenGlass · Accepted Answer · 2011-12-11 06:22:20Z

3

You need to add a link to the stylesheet main_style.css in the html document (i.e. aspx file in ASP.NET) that includes your jquery script. The reference path you specified is just for supporting IntelliSense.

The stylesheet link in your HTML file would look like this if both css file and html file are in the same relative position (otherwise use a relative path to the css file):

<LINK href="main_style.css" rel="stylesheet" type="text/css">

edited Dec 11, 2011 at 6:22

answered Dec 11, 2011 at 6:09

BrokenGlass

161k28 gold badges297 silver badges339 bronze badges

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

Comments

ThinkingStiff · Accepted Answer · 2011-12-11 07:19:34Z

0

The line:

/// <reference path="main_style.css" />

...is for Intellisense in Visual Studio. It does not add a reference to the CSS file that your HTML file can see.

You need to add this to your html <head> section:

<link rel="stylesheet" href="main_style.css" />

I've created a working sample from your latest update:

Demo: http://jsfiddle.net/ThinkingStiff/u39XR/

Work from there.

edited Dec 11, 2011 at 7:19

answered Dec 11, 2011 at 6:14

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

7 Comments

user1056113 Over a year ago

<head> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script> <link href="Scripts/main_style.css" rel="stylesheet" type="text/css" /> <script src="Scripts/mon_script.js" type="text/javascript"></script> <title></title> </head> <body> <p>This is the first paragraph</p> <p id="4">This is the second paragraph</p> <p>This is the third paragraph</p> <p class="blood">This is the fourth paragraph</p> <input type = "button" value="Hi" onclick="ggg()" />

ThinkingStiff Over a year ago

As long as your CSS file is in Scripts/, then that should work.

user1056113 Over a year ago

I just tried the same code on Internet Explorer (and before I was on Firefox)

ThinkingStiff Over a year ago

I updated my answer with a link to a working demo. Start there.

user1056113 Over a year ago

I copy paste your code from jsfiddle. And it didn't work. I really see no error. :( Maybe visual studio bug...

|

Collectives™ on Stack Overflow

Use addClass in jQuery to call a CSS class written in another file

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related