Modifying HTML attributes and
CSS values
Learning Objectives
By the end of this lecture, you should be able to:
–
–
–
–
–
Select based on a class (as opposed to a tag or ID)
Add, remove, and toggle CSS classes
View and modify HTML attributes
View and modify CSS values
Distinguish between a class selector and a descendent selector
Quick Review: CSS Classes
A CSS class is a collection of styles that are grouped together under a class name. A class is created either as
an internal (embedded) style, or in an external style sheet. Here is an example of a class that I call
‘highlight’. It makes the text bold and italic, and makes the background yellow:
.highlight
{
background-color:yellow;
font-weight:bold;
font-style:italic;
}
Recall that when creating a class, you must begin with a period. This tells the parser that what follows is
the definition of a CSS class as opposed to, say, a contextual selector or the styles for an HTML tag
(selector).
You must also include this period when selecting a class using jQuery.
However, when applying a class or when passing the class to various JavaScript functions, we do NOT
include the period.
Examples:
Selecting a class in jQuery – note that we DO include the period:
$('.highlight').hide();
This code selects every section to which the ‘highlight’ class has been applied (and hides it)
In HTML, we apply a class using the class attribute. Note that we do NOT include the period:
<p class="highlight">Text Text Text</p>
Working with Classes
We have been focusing primarily on selecting items in jQuery based on their IDs:
$('#main_content').doSomething();
However, do not forget that we can – and often will – select based on other things such as classes:
Example:
<input type="button" value="Hide Highlights on Page"
onclick="$('.highlight').hide()" >
This will hide ALL selections that have the highlight class applied.
Remember that to select a class, you need a ‘.’ (period) instead of a # symbol. (Recall that the ‘#’ symbol
tells jQuery that to search for an ID).
Here is another example of finessing a selector: Let’s try and remove only those selections based on
classes that are contained inside a specific tag:
$('ul .emphasize').hide()
//Will remove the tags with the emphasize class only when
//those classes are located inside a ‘ul’ tag
$('#errors .emphasize').remove()
//Will remove the emphasize class only when present inside #errors section
Modifying HTML Attributes
In a previous lecture, we talked about selecting elements based on the values of specific
attributes. For example, we might select all hyperlinks that point to DePaul by typing:
•
•
$('a[href*="depaul.edu"]')
This will select all hyperlinks (the ‘a’ tag) that have the text ‘depaul.edu’ anywhere inside
the href attribute. (Recall that it is the ‘*’ character that says to search ‘anywhere’).
Now let’s talk about how we can use JS/JQ to change attributes. Examples of things you
can do with/to attributes include:
• Add an attribute to a tag
• Remove an existing attribute from a tag
• Modify an existing attribute
Modifying HTML Attributes: Adding/Removing CSS Classes
Suppose you have the following HTML:
<div id="container" class="highlight emphasize someOtherClass" style="font-family:Arial;">
<!– Note that it *IS* possible to have multiple classes applied to a single tag -->
<div id="errors">
<img src="errors_pic.jpg">
<h2>Errors Here…</h2>
</div>
</div>
Removing a class with the removeClass() function:
Let’s begin by removing a class from the ‘container’ div tag. We will first select the appropriate tag, and we will then
invoke the removeClass() function. Because it is possible for a tag to have more than one class (as seen in the
example above), we will need to specify the name of the particular class we want to remove. Here is the code:
$('#container').removeClass('emphasize');
Note that when specifying a class as the argument to the removeClass() function, we do NOT include the period.
(Recall that we only include the period in jQuery when we are selecting a class).
Adding a class with the addClass() function:
Let’s add a class called ‘emphasize’ to the ‘errors’ div tag:
$('#errors').addClass('emphasize');
Again note that when applying a class as we are doing here, we do NOT include the period. The period is only used
when creating a class or when selecting a class. Also note that the addClass() function does not remove any old
classes. It simply adds on new ones.
File: modifying_attributes.htm
Adding/Removing attributes, contd
Example using an attribute selector:
As you have just seen, you can apply a class to a group of tags using addClass():
$('a').addClass('hoverlink');
//applies the ‘hoverlink’ class to ALL ‘a’ tags
Now suppose you’ve decided that you only want to apply the class hoverlink to external links (i.e. those links
that go outside of your website). With some thought, it would (hopefully) occur to you that for external sites, there
must always be an ‘http://’ present. Once we recognize that requirement, we can select based on the href attribute
beginning with the string http://
$('a[href^="http://"]').addClass('hoverlink');
// Adds the ‘hoverlink’ class ONLY to ‘a’ tags that have an
// href attribute that begins with the characters http://
This is a great example in that it shows us how we sometimes need to sit back and puzzle out or strategize in order to
come up with methods of getting our programs to do what we want.
Modifying HTML Attributes: Viewing CSS Properties
We’ve discussed adding or removing entire CSS classes. What if you only wanted to modify one or a few individual CSS
properties?
Answer: We use the css() function. As arguments to this function, we provide first the name of the property we wish
to change, followed by a comma, followed by the value we wish to assign to that property.
$('body').css('background-color' , 'red');
//makes the background color of the entire page red
Viewing the value of a property, with the css() function
Suppose you have a paragraph with the following styles:
<p id="random"
style="color:red; font-family:Arial;">Blah blah blah. </p>
The statement $('#random').css('font-family');
would “return” the String Arial . (We’ll explain the meaning of ‘return’ shortly…)
The statement $('#random').css('color');
would “return” a String with the rgb (not hexadecimal) value for red.
Modifying HTML Attributes: Modifying CSS Properties
In addition to allowing us to view the current value of a CSS property, the css() function also allows us to change
the value of a CSS property. Which “version” of the function goes to work depends on whether or not we provide a
second argument to the function:
$('#random').css('color','blue');
In this case, we have added a second argument to the css() function. When you add a second argument, you are
saying that you are not interested in knowing the value of the property, but rather, are interested in setting the
value of that property.
In other words, the function works a little differently depending on how many arguments are provided.
It is very important to note that we use a comma (not an equals sign!) to separate the property that we are trying to
change (color) from its value (red).
<p
id="random"
style="color:red; font-family:Arial;"
onclick="$('#random').css('color','blue')">
Click on me to make me blue!
</p>
//Note how I broke the 3 attributes of this ‘p’ tag over
//separate lines. Rememer: Clarity is always a good thing!
In this case, when the user clicks anywhere inside the ‘random’ section (which in this case is the paragraph), we use
the css()function to modify the value of the ‘color’ property.
A couple of additional examples of the css() function
Again, recall that if we want to use this function to create a style (or modify an existing style), we
provide TWO arguments:
1. We first provide first the name of the property we wish to change
2. Followed by a comma
3. Followed by the value we wish to assign to that property.
$('body').css('background-color' , 'red');
//makes the background color of the entire page red
$('a[href$=".ppt").css('font-size' , '200%');
//doubles the font size of all hyperlinks to Powerpoint files
Pop-Quiz: What would happen here?
<p
id="random"
onclick="$('body').css('color','blue')">
A random paragraph of text...</p>
Answer: Clicking anywhere inside the section with an id of ‘random” (i.e. the current
paragraph) would cause the entire ‘body’ tag (i.e. the content on the whole page) to
turn blue.
The toggleClass() function
This is another very useful function!
In programming/design, switching back and forth between various options is called ‘toggling’. This can
be very useful. Thing of toggling as being similar to a lightswitch so that each time you flip the switch,
the light changes from on to off to on to off and so on.
In programming, toggling means that each time you do something (e.g. clicking on a button),
something changes from one state to another. For example, you might have a button that every time
you click it, a certain class is toggled between on and off.
jQuery provides a toggleClass() function that allows you to turn a class on and off each time you
click the button.
In the modifying_attributes.htm file, try replacing the two buttons with a single button that
says: ‘Toggle the Class’:
<input type="button" value="TOGGLE the 'highlight' class"
onclick="$('#random_text').toggleClass('highlight')">
Class v.s. Descendent Selectors
Compare these two statements:
$('p.emphasize').hide();
$('p .emphasize').hide();
Note that the second version has a space between the ‘p’ and the ‘.emphasize’
What is the significance? In other words, can you articulate the difference in what will be selected between these two
items? This is important!!
Answer:
The first statement without the space selects all p tags to which the emphasize class has been applied. This is an
example of a simple class selector.
The second statement with the space selects all content INSIDE a p tag to which the emphasize class has been
applied. This is an example of a descendent selector.
Example:
$('p.emphasize').css('border' , '1px solid black');
//creates a border around any ‘p’ to which the ‘emphasize’
//class has been applied
Example file: See class_vs_descendent.htm