Solved

DOM der DOM DOM and css

Posted on 2004-08-12
20
930 Views
Last Modified: 2013-11-19
I want to manipulate classes of <td> elements within a table using DOM in a similar way that this code manipulates the id 'foo'. So, my aim would be to change all <td>'s of class 'foo'.

Do you know the correct syntax for doing this, if it's possible?

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
    if (theValue == true || theValue == false)
      eval("obj."+theProp+"="+theValue);
    else eval("obj."+theProp+"='"+theValue+"'");
  }
}



onclick="MM_changeProp('foo','','style.border','solid','td')">Survey  Results</a>
0
Comment
Question by:metalmickey
  • 4
  • 3
  • 3
  • +6
20 Comments
 
LVL 17

Expert Comment

by:mreuring
ID: 11783259
Uhm, hmmm I don't think I understand what you mean. Targetting all td's with the class foo for adding styles to them would be:
td.foo {
  background: green;
}

But I think you might mean something a bit more intricate than that...

 Martin
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11784100
Maybe this can help you:

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
styleBlue = "color: blue; font-weight: bold";
styleRed = "color: red;"
function changeStyle(name)
{
      obj = document.getElementById("myTd");      
      obj.style.cssText = eval(name);
}
</script>
</HEAD>
<BODY>
<table>
      <tr>
            <td id="myTd"  name="myTd" >Data data data</td>
      </tr>
</table><br>
<input type="button" onClick="javascript: changeStyle('styleBlue')" value="Change to Blue Style"><br>
<input type="button" onClick="javascript: changeStyle('styleRed')" value="Change to Red Style"><br>
</BODY>
</HTML>
0
 
LVL 6

Author Comment

by:metalmickey
ID: 11784454
Heres my problem,

http://homepages.nildram.co.uk/~natkins/car_css/

theres a table that has borders applied that is initially hidden, but the table borders are being displayed on load.

I need to turn em off,

any ideas?

MM

0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11784679
Do you mean this?

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
styleBlue = "color: blue; font-weight: bold";
styleRed = "color: red;"
function changeStyle(name)
{
     obj = document.getElementById("sum-cont");    
     obj.style.border = '0';
}
</script>
</HEAD>
<BODY>

<div class="sum-cont" id="sum-cont" style="position:absolute;border:1px solid hotpink; margin-left:5px;">
          <div class=sum-header style="margin-bottom:45px; display:block;">
            <!--<h3>Summary</h3></div><br clear=all>-->
            If running costs, appearance and reliability were all that mattered,
            the dinky Smart car would be near the top of the tree. But this car
            doesn’t make the grade for safety and security.</div>
</div>
<br><br><br><br><br>
<input type="button" onClick="javascript: changeStyle()" value="remove border"><br>

</BODY>
</HTML>
0
 
LVL 6

Author Comment

by:metalmickey
ID: 11784905
Thanks, but No. I need to target every instance of <td> within a table (or, at least ones of a particular class), so I guess what I need is not a getElementById functtion but something akin to a 'getElementByClass' function, if such a thing exists!

I'm trying to be able to switch td borders 'on' with an onClick function within a layer, with them valued:0 , or switched 'off' on load. Since my problem is IE 'ghosting' the td borders of hidden layers on loading the entire page.
0
 
LVL 18

Accepted Solution

by:
arantius earned 150 total points
ID: 11785067
<html>
<head>
<script>
function switchTDBorders(on) {
      var els=document.getElementsByTagName("td");
      for (var i=0; i<els.length; i++) {
            els[i].style.border=(on?"1px solid black":"none");
      }
}
</script>
</head>
<body>
<table>
      <tr>
            <td>1</td>
            <td>2</td>
      </tr>
      <tr>
            <td>3</td>
            <td>4</td>
      </tr>
</table>
<button onclick="javascript:switchTDBorders(1);">Border On</button>
<button onclick="javascript:switchTDBorders(0);">Border Off</button>
</body>
</html>
0
 
LVL 15

Expert Comment

by:Thogek
ID: 11785720
DoYourThing() {
    var oAllTds = getElementsByTagName('td');
    for(var i = 0;  i < oAllTds.length;  ++i) {
        if(oAllTds[i].className == 'foo') {
            // oAllTds[i] is a TD element with class=foo
            // Do your thing to oAllTds[i] here
        }
    }
}
0
 
LVL 8

Expert Comment

by:trevorhartman
ID: 11788713
create two classes and set the className of the tds when you want to change their style
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 150 total points
ID: 11789062
You can change the rule by going through the DOM to find the selector you are targeting:

<script type="text/javascript">
function modRule()
{
      if (!document.styleSheets) return;
      var mycss = new Array();
      if (document.styleSheets[0].cssRules)  // Mozilla
        {
         mycss = document.styleSheets[0].cssRules;
        }
      else
        {        
           mycss = document.styleSheets[0].rules;  // IE
        }
        for (i=0;i<mycss.length;i++)
        {
           if (mycss[i].selectorText.toLowerCase()=='td.foo')
           {
           mycss[i].style.cssText="border:0px solid black";
           }
        }
}
onload=modRule;
</script>


Cd&
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 19

Expert Comment

by:peh803
ID: 11835248
have you tried using the .className javascript property?

For example,

var AllTDs=document.getElementsByTagName("td");
    for (var i=0; i<AllTDs.length; i++) {
         if (AllTDs[i].className=='borderOnClass'){
             AllTDs[i].className='borderOffClass';
         }
         else
         {
             AllTDs[i].className='borderOffClass';
         }
    }

regards,
peh803
0
 
LVL 15

Expert Comment

by:Thogek
ID: 11860926
Isn't that (className) what I suggested above?  :-O
0
 
LVL 19

Expert Comment

by:peh803
ID: 12030899
COBOL:
In response to this:

  >>peh803,

  >> Either you failed to read the comments already posted or you chose not to take the professional approach of recognizing that you comment  
  >> extends off a comment already posted by expert Thogek.  That might go over in the Dodge City of ASP, but if you do it in CSS you may find
  >> the page editors deleting your comments or taking stronger action if you persist.  We collaborate here; and the little trick to get a piece don't
        fly.

Have a bad day or something?  I was just trying to help -- not steal anyone's precious points.  I'm sorry if I offended you by coming into "your realm".  I've been taught a lesson, and I can promise you -- it won't happen again.  I'll be sure to keep restrain my future tomfoolery within the confines of the ASP area.  

Oh yeah, and you might want to consider not berating people for donating their time to help out.  Geesh man, calm down.  

peh803 (aka, "I'll do whatever it takes to steal points from another expert")
0
 
LVL 19

Expert Comment

by:peh803
ID: 12030961
Sean :

If / when you do close this question, please make sure all points go to Thogek -- I was simply trying to help (not steal points), and obviously he posted the answer before I did.

peh803
0
 
LVL 17

Expert Comment

by:mreuring
ID: 12033817
I'm sorry I dropped out of this question, but it was taking flight before I could get an answer in edgewise, if it is not yet resolved, I would like to add a suggestion, I do not believe enyone else has come up with here.
How about using CSS to do all the targetting work for you, this is an approach I've used often in the past. When elements of a certain class have to react upon a change of state, reflect that change of state somewhere on the page by setting a class on the ancestor of all given elements. As an example:
<table id="defaultHidden">
  <tr>
     <td class="foo">&nbsp;</td>
     <td class="foo">&nbsp;</td>
  </tr>
  <tr>
      <td class="bar">&nbsp;</td>
      <td class="bar">&nbsp;</td>
</table>

When scripting, just write something according to:
document.getElementById("defaultHidden").className = "reveal";

For CSS you could now write:
table#defaultHidden td {
  font-family: Verdana;
}
td.foo {
  display: none;
}
table.reveal td.foo {
  display: inherit;
  border: 1px solid green;
}

Hope this might help,

  Martin
0
 
LVL 6

Author Comment

by:metalmickey
ID: 12042098
Hi All

Appologies to all posters.

I have been on holiday so havent been able to administrate the Q.

As it turns out the html/javascript problem has been pulled from my project as the whole project has been canned.

Please advise as to how to split points.

I know the theres a lot of goodwill about and essentially the boards arent about points, they're about knowlegde sharing, so am happy to double the points for being a nuisance.

Thanks for your patience.

MM

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12043565
That's okay MM - looking through the posts I would probably split between:

arantius http:#11785067 and COBOLdinosaur http:#11789062
0
 
LVL 15

Expert Comment

by:Thogek
ID: 12921007
peh803 (if you're still reading here),
BTW, no big deal on the above.  I was just checking that I didn't miss something new, not trying to start a silly point-hoarding exchange.  ;-)
0
 
LVL 19

Expert Comment

by:peh803
ID: 12921079
Thogek :

Thanks -- and you're right to point it out.

When someone else accidentally re-posts in a post that I've been previously involved in, I typically point it out as well.  I appreciate you handling it politely.  

I did, however, take exception to COBOLdinosaur's rude comments, and judging by his history of negative feedback, I'm not the only person that has found his comments to be unprofessional and condescending.

Thanks again,
peh803
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now