You are here:

DHTML/Modifying selector text for CSS rule using JavaScript

Advertisement

Expert: Andrew Hoffman - 3/1/2008


Question
Hi again Andrew.
I went past the last hurdle with your help and got stuck up again at the very next one :-(. This time I'm trying to modify the selector text for a CSS rule using JavaScript.

I'm following the details on page: http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
I'm successfully able to use the "cssRule.selectorText" in an alert message. However, when I try to modify it using JavaScript, it raises an error. So my questions this time are:
1) Is it possible to modify the selector text using JavaScript ?
2) If I need to find whether any browser might support such a feature, what part of the w3c site do I start from (so that I bother you less) ?

Thanks in advance again,
Parag P. Doke

Answer
Parag,
I don't answer questions involving external frameworks or toolboxes, but can give you a few homegrown examples of retrieving text in an element.  This is not say I'm not in favor of using these frameworks--I am--but it's not worth my time to learn a framework I will probably not use again.

Ok, now for some code.  Keep in mind the following information, first.  When you want to get the text inside of an element, you're really going for the value of the text node containing the actual text value you want.  So, text is inside of it's own node--it's not just floating free outside of an element.  This took me a while to understand, but grasping this will help you understand the DOM (Document Object Model) in greater detail.

Note below when I use .lastChild.nodeValue.  The 'lastChild' refers to the textNode of an element.  The 'nodeValue' property is the actual value of the text inside of this node.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>abbr example</title>

<script type="text/javascript">

  window.onload = function() {

     // get textNode value of first <li> inside of 'level_one' <ul>
     alert(document.getElementById("level_one").getElementsByTagName("li")[0].lastChild.nodeValue);

     // get textNode value of second <a> inside of <p>
     alert(document.getElementsByTagName("p")[0].getElementsByTagName("a")[1].lastChild.nodeValue);

  }

</script>
</head>

<body>
<ul id="level_one">
  <li>First Level</li>
  <li>Second Level</li>
</ul>
<p>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</p>
</body>
</html>  

DHTML

All Answers

Answers by Expert:

Ask Experts

Volunteer

Andrew Hoffman

Expertise

Ask me about JavaScript, CSS, HTML5/XHTML, or PHP. Chances are I'll be able to help you. I know the economy is in the tank, but if you like my answer, please consider donating a few bucks. It's like tipping your barista, if your barista served fresh code instead of coffee.

Experience

I started doing this when boy bands were still cool.

Education/Credentials
I read a lot of nerdy books to get here.

©2012 About.com, a part of The New York Times Company. All rights reserved.