Change CSS(Class attribute to other attribute)

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • MATTXtwo
    New Member
    • Sep 2006
    • 83
    #1

    Change CSS(Class attribute to other attribute)

    I have surf throught many site and found this...
    [HTML]http://www.adobe.com/go/gn_home[/HTML]
    how to change an element attribute to other class attribute...
    I wonder......can we change class attribute to something else..
    i need to change class that have[CODE].DisplayBlock {
    display : block;
    }
    CODE] to
    Code:
     .DisplayNone {
	  display: none;
	 }
    by vbscript or javascript for some function that i need
    Tags: None
    • DrBunchman
      Recognized Expert Contributor
      • Jan 2008
      • 979
      #2
      Hi MATTXtwo,

      You can use Javascript to do this, like so:

      Code:
      <html>
<head>
	<style>
		.DisplayBlock {
			  display : block;
			}

		.DisplayNone {
			  display: none;
			 }

	</style>
	<script type="text/javascript">
		function Hide(element)
		{
		document.getElementById(element).className = 'DisplayNone';
		}
		function Show(element)
		{
		document.getElementById(element).className = 'DisplayBlock';
		}
	</script>
</head>
<body>
	<div id="div1" class="DisplayBlock" OnMouseOver="Hide('div1')" OnMouseOut="Show('div1')">
		Hello World!
	</div>
</body>
</html>
      Let me know if this helps,

      Dr B

        Comment

        • MATTXtwo
          New Member
          • Sep 2006
          • 83
          #3
          Originally posted by DrBunchman
          Hi MATTXtwo,

          Let me know if this helps,

          Dr B
          Sorry Dr B
          Code:
          function changeBMBI(vtype)
{	var x=1;
//var set as many of label element that need to be control
	if(vtype=="BM")
	{	
		document.getElementById("BI"+x).style.display="none";
		document.getElementById("BM").style.display="none";
		document.getElementById("BM"+x).style.display="block";
		document.getElementById("BI").style.display="block";
		alert(vtype=="BM"+"bm");
	}else{
	alert(vtype=="BM"+"not"+vtype);
	}
	if(vtype=="BI")
	{	document.getElementById("BM"+x).style.display="none";
		document.getElementById("BI").style.display="none";
		document.getElementById("BI"+x).style.display="block";
		document.getElementById("BM").style.display="block";
		alert(vtype=="BI"+"bi");
	}else{
	alert(vtype=="BI"+"not"+vtype);
	}
}
..................................................................................................................
<label id="BM1"><b>Bahagian Sumber Manusia</b></label>
<label id="BI1"><b>Human Resource Department</b></label></font></td>
</tr><tr><td align="right">
<label id="BI" onclick="javascript: changeBMBI('BI')">versi Bahasa Inggeris</label>
<label id="BM" onclick="javascript: changeBMBI('BM')"><b>Malay version</b></label></td>
</tr><tr><td><input id="versions" type="hidden" value="<%=session("versiBMBI")%>"><%Response.Write session("versiBMBI")%></td>
          it's for changing between to language ..
          The thing is we can only change the style by element not by class declare on all element or div id's for bulk element change from style display block to style display none

            Comment

            • DrBunchman
              Recognized Expert Contributor
              • Jan 2008
              • 979
              #4
              Sorry MATTXtwo, I don't understand what it is your trying to do or why the example I gave above won't work.

              I thought that you wanted to be able to change the class of an element programatically - was I wrong?

              Dr B

                Comment

                • MATTXtwo
                  New Member
                  • Sep 2006
                  • 83
                  #5
                  Originally posted by DrBunchman
                  Sorry MATTXtwo, I don't understand what it is your trying to do or why the example I gave above won't work.

                  I thought that you wanted to be able to change the class of an element programatically - was I wrong?

                  Dr B
                  it works fine....it just I thought it would be done like change the class definiton from style:display block to style:display none..
                  so i added the x var as for the id like BM,BM1,BM2 and so on
                  Thanks anyway

                    Comment

                    • DrBunchman
                      Recognized Expert Contributor
                      • Jan 2008
                      • 979
                      #6
                      Ah I see! I don't think that's possible using javascript but if any other experts know different then please let us know.

                      I'm glad that it works for you anyway :-)

                      Dr B

                        Comment

                        Previous template Next
                        Working...