The advantages are much the same as separating them from the HTML.<br>By setting classes rather than styles you can then keep all style information within the stylesheet.<br><br>Using the div toggle as an example, say you have multiple methods all of which control the visibility of different divs throughout a site. Each one is setting an elements
style.display = "none" or similar<br><br>Then someone has the bright idea that instead of any of the elements being hidden they should all have their background changed to bright pink with purple dots (or whatever, have their alpha set to 50% etc etc) instead
<br><br>If you are applying the styles directly to the element within your different methods you have to dig through your js file changing each one<br><br>If your toggling a class on/off you simply go to your style sheet and change
<br><br>.toggled {<br> display: none;<br>}<br><br>to<br><br>toggled {<br> background: url(pinkdots.gif);<br>}<br><br>and your done :)<br><br><br><br><div><span class="gmail_quote">On 11/30/06, <b class="gmail_sendername">
Stephan Wehner</b> <<a href="mailto:stephanwehner@gmail.com">stephanwehner@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Could you elaborate? What is the advantage of dynamically setting<br>classes over styles?<br><br>I can see within the HTML document itself, it's good to separate the<br>style. But in the dynamic case I don't see it.<br><br>
Stephan<br><br>On 11/29/06, Aaron Bassett <<a href="mailto:aaronbassett@gmail.com">aaronbassett@gmail.com</a>> wrote:<br>> Why is everyone (well minus a few) so dedicated to adding styles 'inline'??<br>> As we all know styles should be kept in the style sheet etc etc
<br>><br>> so define a class<br>><br>> .hide {<br>> display: none; /* or visibility: hidden */<br>> }<br>><br>> and then add and remove the class<br>><br>> there are several nice functions out there to do this already or if you use
<br>> the prototype.js library (or even if you dont these methods are easy enough<br>> to remove and add to your own class or create as functions)<br>><br>> Element.addClassName(el, "hide");<br>>
Element.removeClassName(el, "hide");<br>><br>> no need to worry if the default property value is inline of block as when<br>> you remove the class it will go back to what it was before, and has the<br>> added benefit of keeping your style away from your function :)
<br>><br>><br>><br>><br>> On 11/29/06, Peter Brunone <<a href="mailto:peter@brunone.com">peter@brunone.com</a>> wrote:<br>> ><br>> > Hi Roland,<br>> ><br>> > Instead of using
style.visibility = "hidden", use style.display="none".<br>> Then, to change it back, you set the display to "inline" (it might be<br>> "block", but I'm pretty sure the default is "inline" for select elements;
<br>> you can look it up if necessary).<br>> ><br>> > Cheers,<br>> ><br>> > Peter Brunone<br>> > ______________<br>> > EasyListBox.com<br>> ><br>> > From: "Dong, Roland"
<a href="mailto:Roland_Dong@parade.com">Roland_Dong@parade.com</a><br>> ><br>> ><br>> > Hello,<br>> ><br>> ><br>> ><br>> > I need to dynamically hide and unhide a selection box based on the value
<br>> selected in the first selection box. So if a user selects "a" in selection<br>> box, element id2 should be visible else it should remain hidden. I can use<br>> document.getElementByI("id2").style.visibility="visible"
<br>> to make it visible and<br>> document.getElementById("ed1").style.visibility="hidden";<br>> to make it disappear. The problem when element id2 disappears, it still<br>> keeps space there and it makes the form look bad. Is there a way to
<br>> dynamically remove the space it occupies?<br>> ><br>> > .......<br>> > <tr id="id1"><br>> > <td><br>> > <select name="first" onchange="check(this)">
<br>> > <option>a</option><br>> > <option>b</option><br>> > </select><br>> > <td><br>> > </tr><br>> > <tr id ="id2" style="visibility:hidden";>
<br>> > <td><br>> > <select name="second"><br>> > <option>c</option><br>> > <option>d</option><br>> > </select>
<br>> > <td><br>> > </tr><br>> > ..............<br>> > rest of the form....<br>> ><br>> ><br>> > Thanks a lot,<br>> ><br>> > Roland<br>> > _______________________________________________
<br>> > Javascript mailing list<br>> > <a href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu</a><br>> > <a href="https://lists.LaTech.edu/mailman/listinfo/javascript">https://lists.LaTech.edu/mailman/listinfo/javascript
</a><br>> ><br>> ><br>> ><br>><br>><br>> _______________________________________________<br>> Javascript mailing list<br>> <a href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu</a><br>
> <a href="https://lists.LaTech.edu/mailman/listinfo/javascript">https://lists.LaTech.edu/mailman/listinfo/javascript</a><br>><br>><br>><br><br><br>--<br>Stephan Wehner<br>> <a href="http://stephan.sugarmotor.org">
http://stephan.sugarmotor.org</a><br>> <a href="http://stephansmap.org">http://stephansmap.org</a><br>> <a href="http://www.trafficlife.com">http://www.trafficlife.com</a><br>> <a href="http://www.buckmaster.ca">
http://www.buckmaster.ca</a><br>_______________________________________________<br>Javascript mailing list<br><a href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu</a><br><a href="https://lists.LaTech.edu/mailman/listinfo/javascript">
https://lists.LaTech.edu/mailman/listinfo/javascript</a><br></blockquote></div><br>