Change Css Properties Using Javascript

Forum Moderators: open

Message Too Old, No Replies

Change Css Properties Using Javascript

harchew

6:35 am on Jul 25, 2008 (gmt 0)

is there a way to do a onclick function to change the css properties?

Example

<a href="#" onlick="changeStyle()">Change</a>

<div id="data_div" class="show">layer 1</div>
<div id="data_div" class="show">layer 1</div>
<div id="data_div" class="show">layer 1</div>
<div id="data_div_sub" class="show">layer 1</div>
<div id="data_div" class="show">layer 1</div>
<div id="data_div_sub" class="show">layer 1</div>
<div id="data_div_sub" class="show">layer 1</div>

Would like to hide all the layers with the id name = "data_div". Izzit possible to do this without using a unique id name for each div?

Sekka

7:11 am on Jul 25, 2008 (gmt 0)

Wrong forum! However,

You could wrap the DIVs with another DIV. Grab that wrapper DIV by ID and go through all it's children, aka alter all the DIVs within it.

harchew

7:37 am on Jul 25, 2008 (gmt 0)

Oh so sorry didn't notice i am in a php server side forum.. anyway would you mind showing me the code on how to get the child div? Really need help in this area. Thank you in advance.

janharders

7:45 am on Jul 25, 2008 (gmt 0)

id is, per definition, a unique attribute, so you may not use it more than once in a page.
however, the overhead of checking all divs shouldn't be too big:

var divs = document.getElementsByTagNames('div');
for(var i = 0; i < divs.length; i++)
{
if(divs[i].id.substr(0, 8) == 'data_div')
{
divs[i].style.visibility = 'hidden';
}
}

just give the divs you want to use ids that start with data_div, like data_div1, data_div2, data_div3 and those, you don't want to hide, ids that don't start with data_div, like, subdata_div1, subdata_div2.

haven't tested it, but id should work. more or less.

Fotiman

2:33 pm on Jul 25, 2008 (gmt 0)

Would like to hide all the layers with the id name = "data_div". Izzit possible to do this without using a unique id name for each div?

As was pointed out, an id value MUST be unique. You could, instead, use a class. Here is an example in which I use the Yahoo UI Library's DOM utility to get elements by class name, and to set the style.

Also, your style rule is wrong. You don't use = in stylesheets. So instead of display = '' it should be display: auto;

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
<!-- Styles --> 
<style type="text/css"> 
.show { 
  display: auto; 
} 
.hide { 
  display: none; 
} 
</style> 
<title>Untitled</title> 
</head> 
<body> 
<a href="#" onclick="changeStyle()">Change</a> 
<div class="show data_div">layer 1</div> 
<div class="show data_div">layer 1</div> 
<div class="show data_div">layer 1</div> 
<div class="show data_div_sub">layer 1</div> 
<div class="show data_div">layer 1</div> 
<div class="show data_div_sub">layer 1</div> 
<div class="show data_div_sub">layer 1</div>  
<!-- Scripts --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script> 
<script type="text/javascript"> 
function changeStyle() { 
  var D = YAHOO.util.Dom; 
  D.setStyle(D.getElementsByClassName('data_div', 'div'), 'display', 'none'); 
  // OR 
  // D.replaceClass(D.getElementsByClassName('data_div', 'div'), 'show', 'hide'); 
} 
</script> 
</body> 
</html>

harchew

9:53 am on Jul 28, 2008 (gmt 0)

Fotiman, thank you for the complete coding...it works perfectly fine. Learn something new today..Problem Solved!