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: Text Text Text

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: Errors Here… 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 ‘ present. Once we recognize that requirement, we can select based on the href attribute beginning with the string $('a[href^=" // Adds the ‘hoverlink’ class ONLY to ‘a’ tags that have an // href attribute that begins with the characters 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: Blah blah blah. 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! //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... 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(); 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